將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; }
.right-addon input { padding-right: 30px; }

Demo in Plunker 在Plunker演示

Note : This presumes you're using glyphicons , but works equally well with font-awesome . 注意 ：這假設你使用的是glyphicons ，但同樣適用於font-awesome 。
For FA, just replace .glyphicon with .fa 對於FA，只需將.glyphicon替換爲.glyphicon .fa

---

With Bootstrap: 使用Bootstrap：

As buffer points out , this can be accomplished natively within Bootstrap by using Validation States with Optional Icons . 緩衝區指出 ，這可以通過使用帶有可選圖標的驗證狀態在Bootstrap中本機完成。 This is done by giving the .form-group element the class of .has-feedback and the icon the class of .form-control-feedback . 這是通過爲.form-group元素提供.has-feedback類和圖標類.form-control-feedback 。

The simplest example would be something like this: 最簡單的例子是這樣的：

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

Pros : 優點 ：

• Includes support for different form types (Basic, Horizontal, Inline) 包括對不同表單類型的支持（基本，水平，內聯）
• Includes support for different control sizes (Default, Small, Large) 包括對不同控件尺寸的支持（默認，小，大）

Cons : 缺點 ：

• Doesn't include support for left aligning icons 不包括對左對齊圖標的支持

To overcome the cons, I put together this pull-request with changes to support left aligned icons. 爲了克服缺點，我將這個pull-request與更改一起放在一起，以支持左對齊圖標。 As it is a relatively large change, it has been put off until a future release, but if you need these features today , here's a simple implementation guide: 由於這是一個相對較大的變化，它一直推遲到未來發布，但如果你今天需要這些功能，這裏有一個簡單的實現指南：

Just include the these form changes in css (also inlined via hidden stack snippet at the bottom) 只需在css中包含這些表單更改 （也可以通過底部隱藏的堆棧代碼內聯）
_{*LESS : alternatively, if you are building via less , here's the form changes in less * LESS ：或者，如果你通過less建造 ，這裏的形式變化較少}

Then, all you have to do is include the class .has-feedback-left on any group that has the class .has-feedback in order to left align the icon. 然後，您所要做的就是在任何具有類.has-feedback組中包含類.has-feedback-left以便左對齊圖標。

Since there are a lot of possible html configurations over different form types, different control sizes, different icon sets, and different label visibilities, I created a test page that shows the correct set of HTML for each permutation along with a live demo. 由於在不同的表單類型，不同的控件大小，不同的圖標集和不同的標籤可見性上有很多可能的html配置，我創建了一個測試頁面，顯示每個排列的正確HTML集以及現場演示。

Here's a demo in Plunker 這是Plunker的一個演示

PS frizi's suggestion of adding pointer-events: none; PS frizi建議添加pointer-events: none; has been added to bootstrap 已被添加到bootstrap中

Didn't find what you were looking for ? 沒找到你要找的東西 ？ Try these similar questions: 試試這些類似的問題：

• Add Twitter Bootstrap icon to Input box 將Twitter Bootstrap圖標添加到“輸入”框
• Put search icon near textbox bootstrap 將搜索圖標放在文本框引導程序附近

Addition CSS for Left Aligned feedback icons 左對齊反饋圖標的附加CSS

 .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; } 

---

#4樓

Here's a CSS-only alternative. 這是一個僅限CSS的替代方案。 I set this up for a search field to get an effect similar to Firefox (& a hundred other apps.) 我爲搜索字段設置了這個以獲得類似於Firefox（和其他一百個應用程序）的效果。）

Here's a fiddle . 這是一個小提琴 。

HTML HTML

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

CSS CSS

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

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

---

#5樓

This 'cheat' will work with the side effect that the glyphicon class will change the font for the input control. 這個'作弊'將與glyphicon類將改變輸入控件的字體的副作用一起使用。

Fiddle 小提琴

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

If you want to get rid of the side effect you can remove the "glyphicon" class and add the following CSS (There may be a better way to style the placeholder pseudo element and I've only tested on Chrome). 如果你想擺脫副作用你可以刪除“glyphicon”類並添加以下CSS（可能有一種更好的方式來設置佔位符僞元素的樣式，我只在Chrome上測試過）。

Fiddle 小提琴

.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";
}

Possibly an even cleaner solution: 可能是一個更清潔的解決方案：

Fiddle 小提琴

CSS 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 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" />

---

#6樓

Here's another way to do it by placing the glyphicon using the :before pseudo element in CSS. 這是通過使用CSS中的:before僞元素放置glyphicon來實現此目的的另一種方法。

Working demo in jsFiddle 在jsFiddle中工作演示

For this HTML: 對於這個HTML：

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

Use this CSS ( Bootstrap 3.x and Webkit-based browsers compatible ) 使用此CSS（ Bootstrap 3.x和基於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;
}

As @Frizi said, we have to add pointer-events: none; 正如@Frizi所說，我們必須添加pointer-events: none; so that the cursor doesn't interfere with the input focus. 這樣光標不會干擾輸入焦點。 All the others CSS rules are for centering and adding the proper spacing. 所有其他CSS規則用於居中和添加適當的間距。

The result: 結果：