将Bootstrap Glyphicon添加到输入框

本文翻译自：Add Bootstrap Glyphicon to Input Box

How can I add a glyphicon to a text type input box? 如何将glyphicon添加到文本类型输入框？ For example I want to have 'icon-user' in a username input, something like this: 例如，我想在用户名输入中使用'icon-user'，如下所示：

---

#1楼

参考：https://stackoom.com/question/1H2sG/将Bootstrap-Glyphicon添加到输入框

---

#2楼

You should be able to do this with existing bootstrap classes and a little custom styling. 您应该可以使用现有的引导类和一些自定义样式来完成此操作。

<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>         

Edit The icon is referenced via the icon-user class. 编辑图标通过icon-user类引用。 This answer was written at the time of Bootstrap version 2. You can see the reference on the following page: http://getbootstrap.com/2.3.2/base-css.html#images 这个答案是在Bootstrap第2版时编写的。您可以在以下页面上看到该参考： http ： //getbootstrap.com/2.3.2/base-css.html#images

---

#3楼

Without Bootstrap: 没有Bootstrap：

We'll get to Bootstrap in a second, but here's the fundamental CSS concepts in play in order to do this yourself. 我们将在一秒钟内进入Bootstrap，但这里是基本的CSS概念，以便自己完成。 As beard of prey points out , you can do this with CSS by absolutely positioning the icon inside of the input element. 正如猎物的胡须指出的那样 ，你可以通过将输入元素内部的图标绝对定位来使用CSS。 Then add padding to either side so the text doesn't overlap with the icon. 然后在任一侧添加填充，以使文本不与图标重叠。

So for the following HTML: 所以对于以下HTML：

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

You can use the following CSS to left and right align glyphs: 您可以使用以下CSS左右对齐字形：

/* 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; }