Làm cách nào để thêm glyphicon vào hộp nhập văn bản? Ví dụ: tôi muốn có 'biểu tượng người dùng' trong đầu vào tên người dùng, đại loại như thế này:

Không có Bootstrap:

Chúng ta sẽ đến Bootstrap trong một giây, nhưng đây là các khái niệm CSS cơ bản để chơi để tự làm điều này. Khi râu của con mồi chỉ ra , bạn có thể làm điều này với CSS bằng cách định vị hoàn toàn biểu tượng bên trong phần tử đầu vào. Sau đó thêm phần đệm vào hai bên để văn bản không trùng với biểu tượng.

Vì vậy, đối với HTML sau:

<div class="inner-addon left-addon">
    <i class="glyphicon glyphicon-user"></i>
    <input type="text" class="form-control" />
</div>

Bạn có thể sử dụng CSS sau đây để căn chỉnh glyphs trái và phải:

/* enable absolute positioning */
.inner-addon { 
    position: relative; 
}

/* style icon */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

Bản trình diễn trong Plunker

Lưu ý : Điều này giả sử bạn đang sử dụng glyphicons , nhưng hoạt động tốt như nhau với phông chữ tuyệt vời .
Đối với FA, chỉ cần thay thế .glyphiconbằng.fa

Với Bootstrap:

Như bộ đệm chỉ ra , điều này có thể được thực hiện nguyên bản trong Bootstrap bằng cách sử dụng Trạng thái xác thực với các biểu tượng tùy chọn . Điều này được thực hiện bằng cách cung cấp cho .form-groupphần tử lớp .has-feedbackvà biểu tượng của lớp .form-control-feedback.

Ví dụ đơn giản nhất sẽ là một cái gì đó như thế này:

<div class="form-group has-feedback">
    <label class="control-label">Username</label>
    <input type="text" class="form-control" placeholder="Username" />
    <i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>

Ưu điểm :

• Bao gồm hỗ trợ cho các loại biểu mẫu khác nhau (Cơ bản, Ngang, Nội tuyến)
• Bao gồm hỗ trợ cho các kích thước điều khiển khác nhau (Mặc định, Nhỏ, Lớn)

Nhược điểm :

• Không bao gồm hỗ trợ cho các biểu tượng căn lề trái

Để khắc phục nhược điểm, tôi kết hợp yêu cầu kéo này với các thay đổi để hỗ trợ các biểu tượng căn lề trái. Vì nó là một thay đổi tương đối lớn, nó đã bị hoãn cho đến khi phát hành trong tương lai, nhưng nếu bạn cần những tính năng này ngay hôm nay , thì đây là một hướng dẫn thực hiện đơn giản:

Chỉ cần bao gồm các thay đổi biểu mẫu này trong css (cũng được nội tuyến qua đoạn mã ngăn xếp ẩn ở phía dưới)
_{* BÀI : thay vào đó, nếu bạn đang xây dựng qua ít hơn , thì đây là biểu mẫu thay đổi ít hơn}

Sau đó, tất cả những gì bạn phải làm là bao gồm lớp .has-feedback-lefttrên bất kỳ nhóm nào có lớp .has-feedbackđể căn chỉnh biểu tượng.

Vì có rất nhiều cấu hình html có thể có trên các loại biểu mẫu khác nhau, kích thước điều khiển khác nhau, bộ biểu tượng khác nhau và mức độ hiển thị nhãn khác nhau, tôi đã tạo một trang thử nghiệm hiển thị bộ HTML chính xác cho mỗi hoán vị cùng với bản demo trực tiếp.

Đây là bản demo trong Plunker

Đề xuất thêm PS frizipointer-events: none; đã được thêm vào bootstrap

Không tìm thấy những gì bạn đang tìm kiếm ? Hãy thử những câu hỏi tương tự:

• Thêm biểu tượng Bootstrap Twitter vào hộp Nhập liệu
• Đặt biểu tượng tìm kiếm gần bootstrap của textbox

CSS bổ sung cho các biểu tượng phản hồi được căn trái

.has-feedback .form-control {
  padding-right: 34px;
}
.has-feedback .form-control.input-sm,
.has-feedback.form-group-sm .form-control {
  padding-right: 30px;
}
.has-feedback .form-control.input-lg,
.has-feedback.form-group-lg .form-control {
  padding-right: 46px;
}
.has-feedback-left .form-control {
  padding-right: 12px;
  padding-left: 34px;
}
.has-feedback-left .form-control.input-sm,
.has-feedback-left.form-group-sm .form-control {
  padding-left: 30px;
}
.has-feedback-left .form-control.input-lg,
.has-feedback-left.form-group-lg .form-control {
  padding-left: 46px;
}
.has-feedback-left .form-control-feedback {
  left: 0;
}
.form-control-feedback {
  line-height: 34px !important;
}
.input-sm + .form-control-feedback,
.form-horizontal .form-group-sm .form-control-feedback {
  width: 30px;
  height: 30px;
  line-height: 30px !important;
}
.input-lg + .form-control-feedback,
.form-horizontal .form-group-lg .form-control-feedback {
  width: 46px;
  height: 46px;
  line-height: 46px !important;
}
.has-feedback label.sr-only ~ .form-control-feedback,
.has-feedback label.sr-only ~ div .form-control-feedback {
  top: 0;
}
@media (min-width: 768px) {
  .form-inline .inline-feedback {
    position: relative;
    display: inline-block;
  }
  .form-inline .has-feedback .form-control-feedback {
    top: 0;
  }
}
.form-horizontal .has-feedback-left .form-control-feedback {
  left: 15px;
}

Các quan chức phương pháp. Không yêu cầu CSS tùy chỉnh:

<form class="form-inline" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4"></label>
    <input type="text" class="form-control" id="inputSuccess4">
    <span class="glyphicon glyphicon-user form-control-feedback"></span>
  </div>
</form>

DEMO: http://jsfiddle.net/LS2Ek/1/

Bản demo này dựa trên một ví dụ trong tài liệu Bootstrap. Cuộn xuống "Với các biểu tượng tùy chọn" tại đây http://getbootstrap.com/css/#forms-control-validation

Đây là một thay thế chỉ CSS. Tôi thiết lập trường này cho trường tìm kiếm để có hiệu ứng tương tự Firefox (& hàng trăm ứng dụng khác.)

Đây là một câu đố .

HTML

<div class="col-md-4">
  <input class="form-control" type="search" />
  <span class="glyphicon glyphicon-search"></span>
</div>

CSS

.form-control {
  padding-right: 30px;
}

.form-control + .glyphicon {
  position: absolute;
  right: 0;
  padding: 8px 27px;
}

Đây là cách tôi đã làm nó chỉ bằng cách sử dụng CSS v3.3.1 bootstrap mặc định:

<div class="form-group">
    <label class="control-label">Start:</label>
    <div class="input-group">
        <input type="text" class="form-control" aria-describedby="start-date">
        <span class="input-group-addon" id="start-date"><span class="glyphicon glyphicon-calendar"></span></span>
    </div>
</div>

Và đây là vẻ ngoài của nó:

'Gian lận' này sẽ hoạt động với hiệu ứng phụ là lớp glyphicon sẽ thay đổi phông chữ cho điều khiển đầu vào.

Vĩ cầm

<input class="form-control glyphicon" type="search" placeholder="&#57347;"/>

Nếu bạn muốn loại bỏ hiệu ứng phụ, bạn có thể xóa lớp "glyphicon" và thêm CSS sau (Có thể có cách tốt hơn để định kiểu phần tử giả giữ chỗ và tôi chỉ thử nghiệm trên Chrome).

Vĩ cầm

.form-control[type="search"]::-webkit-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]::-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-ms-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}

Có thể là một giải pháp thậm chí còn sạch hơn:

Vĩ cầm

CSS

.form-control.glyphicon {
    font-family:inherit;
}
.form-control.glyphicon::-webkit-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon::-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-ms-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}

HTML

<input class="form-control glyphicon" type="search" placeholder="&#57347; search" />
<input class="form-control glyphicon" type="text"  placeholder="&#57352; username" />
<input class="form-control glyphicon" type="password"  placeholder="&#57395; password" />

Nó có thể được thực hiện bằng cách sử dụng các lớp từ phiên bản bootstrap 3.x chính thức, mà không có bất kỳ css tùy chỉnh nào.

Sử dụng input-group-addontrước thẻ đầu vào, bên trong input-groupsau đó sử dụng bất kỳ glyphicons nào, đây là mã

<form>
  <div class="form-group">
    <div class="col-xs-5">
      <div class="input-group">
          <span class="input-group-addon transparent"><span class="glyphicon glyphicon-user"></span></span>
          <input class="form-control left-border-none" placeholder="User Name" type="text" name="username">
      </div>
    </div>
  </div>
</form>

Đây là đầu ra

Để tùy chỉnh thêm, thêm một vài dòng css tùy chỉnh vào tệp custom.css của riêng bạn (điều chỉnh phần đệm nếu cần)

.transparent {
    background-color: transparent !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }
 .left-border-none {
    border-left:none !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }

Bằng cách làm cho nền trong input-group-addonsuốt và làm cho độ dốc bên trái của thẻ đầu vào về 0, đầu vào sẽ có hình dạng liền mạch. Đây là đầu ra tùy chỉnh

Đây là một ví dụ jsbin

Điều này sẽ giải quyết các vấn đề css tùy chỉnh chồng chéo với nhãn, căn chỉnh trong khi sử dụng input-lgvà tập trung vào vấn đề tab.

Đây là một giải pháp không phải bootstrap giúp đánh dấu của bạn đơn giản bằng cách nhúng biểu diễn hình ảnh của glyphicon trực tiếp trong CSS bằng cách sử dụng mã hóa URI cơ sở64.

input {
  border:solid 1px #ddd;
}
input.search {
	padding-left:20px;
	background-repeat: no-repeat;
	background-position-y: 1px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVDhP5ZI9C4MwEIb7//+BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII+22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4+C+/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII=);
}

<input class="search">

Nếu bạn đang sử dụng Fontawgie, bạn có thể làm điều này:

<input type="text" style="font-family:Arial, FontAwesome"  placeholder="&#xf007;" />

Kết quả

Danh sách đầy đủ của unicode có thể được tìm thấy trong tài liệu tham khảo biểu tượng Font Awesome 4.6.3 hoàn chỉnh

Đây là một cách khác để làm điều đó bằng cách đặt glyphicon bằng :beforephần tử giả trong CSS.

Bản demo hoạt động trong jsFiddle

Đối với HTML này:

<form class="form form-horizontal col-xs-12">
    <div class="form-group">
        <div class="col-xs-7">
            <span class="usericon">
                <input class="form-control" id="name" placeholder="Username" />
            </span>
        </div>
    </div>
</form>

Sử dụng CSS này ( tương thích với các trình duyệt dựa trên Bootstrap 3.x và Webkit )

.usericon input {
    padding-left:25px;
}
.usericon:before {
    height: 100%;
    width: 25px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    position: absolute;
    content: "\e008";
    font-family: 'Glyphicons Halflings';
    pointer-events: none;
}

Như @Frizi đã nói, chúng ta phải thêm pointer-events: none;để con trỏ không can thiệp vào tiêu điểm đầu vào. Tất cả các quy tắc CSS khác là để định tâm và thêm khoảng cách thích hợp.

Kết quả:

Bạn có thể sử dụng HTML Unicode của nó

Vì vậy, để thêm một biểu tượng người dùng, chỉ cần thêm vàoplaceholder thuộc tính hoặc bất cứ nơi nào bạn muốn.

Bạn có thể muốn kiểm tra tờ cheat này .

Thí dụ:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<input type="text" class="form-control" placeholder="&#xe008; placeholder..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="text" class="form-control" value="&#xe008; value..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="submit" class="btn btn-primary" value="&#xe008; submit-button" style="font-family: 'Glyphicons Halflings', Arial">

Đừng quên đặt phông chữ của đầu vào thành Glyphicon, sử dụng mã sau : font-family: 'Glyphicons Halflings', Arial, trong đó Arial là phông chữ của văn bản thông thường trong đầu vào.

Tôi cũng có một quyết định cho trường hợp này với Bootstrap 3.3.5:

<div class="col-sm-5">
    <label for="date">
       <input type="date" placeholder="Date" id="date" class="form-control">         
    </label>
    <i class="glyphicon glyphicon-calendar col-sm-pull-2"></i>
</div>

Về đầu vào tôi có một cái gì đó như thế này:

Đã thử nghiệm với Bootstrap 4.

Lấy một form-control, và thêm is-validvào lớp của nó. Chú ý cách điều khiển chuyển sang màu xanh lá cây, nhưng quan trọng hơn, hãy chú ý biểu tượng dấu kiểm bên phải của điều khiển? Đây là những gì chúng ta muốn!

Thí dụ:

.my-icon {
    padding-right: calc(1.5em + .75rem);
    background-image: url('https://use.fontawesome.com/releases/v5.8.2/svgs/regular/calendar-alt.svg');
    background-repeat: no-repeat;
    background-position: center right calc(.375em + .1875rem);
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="col-md-5">
	<input type="text" id="date" class="form-control my-icon" placeholder="Select...">
  </div>
</div>

Nếu bạn đủ may mắn chỉ cần các trình duyệt hiện đại: hãy thử dịch chuyển đổi css. Điều này không yêu cầu trình bao bọc và có thể được tùy chỉnh để bạn có thể cho phép thêm khoảng cách cho đầu vào [type = number] để chứa bộ đệm đầu vào hoặc di chuyển nó sang bên trái của tay cầm.

    @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");


.is-invalid {
  height: 30px;
  box-sizing: border-box;
}

.is-invalid-x {
  font-size:27px;
  vertical-align:middle;
  color: red;
  top: initial;
  transform: translateX(-100%);
}




 <h1>Tasty Field Validation Icons using only css transform</h1>
    <label>I am just a poor boy nobody loves me</label>
    <input class="is-invalid"><span class="glyphicon glyphicon-exclamation-sign is-invalid-x"></span>

http://codepen.io/anon/pen/RPRmNq?editors=110

Bạn sẽ có thể làm điều này với các lớp bootstrap hiện có và một chút kiểu dáng tùy chỉnh.

<form>
    <div class="input-prepend">
        <span class="add-on">
            <i class="icon-user"></i>
        </span>
        <input class="span2" id="prependedInput" type="text" placeholder="Username" style="background-color: #eeeeee;border-left: #eeeeee;">
    </div>         

Chỉnh sửa Biểu tượng được tham chiếu qua icon-userlớp. Câu trả lời này được viết tại thời điểm Bootstrap phiên bản 2. Bạn có thể xem tài liệu tham khảo trên trang sau: http://getbootstrap.com/2.3.2/base-css.html#images