CSS 将 Bootstrap Glyphicon 添加到输入框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18838964/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add Bootstrap Glyphicon to Input Box
提问by doovers
How can I add a glyphicon to a text type input box? For example I want to have 'icon-user' in a username input, something like this:
如何将字形添加到文本类型输入框？例如，我想在用户名输入中包含“icon-user”，如下所示：
回答by KyleMit
Without Bootstrap:
没有引导程序：
We'll get to Bootstrap in a second, but here's the fundamental CSS concepts in play in order to do this yourself. As beard of prey points out, you can do this with CSS by absolutely positioning the icon inside of the input element. Then add padding to either side so the text doesn't overlap with the icon.
稍后我们将介绍 Bootstrap，但这里有一些基本的 CSS 概念，以便您自己完成。正如beard of prey 指出的那样，您可以通过将图标绝对定位在输入元素内来使用CSS 做到这一点。然后在任一侧添加填充，这样文本就不会与图标重叠。
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.
For FA, just replace.glyphiconwith.fa
注意：这假定您使用的是glyphicons，但与font-awesome也同样有效。
对于 FA，只需替换.glyphicon为.fa
With Bootstrap:
使用引导程序：
As buffer points out, this can be accomplished natively within Bootstrap by using Validation States with Optional Icons. This is done by giving the .form-groupelement the class of .has-feedbackand the icon the class of .form-control-feedback.
正如缓冲区指出的那样，这可以通过使用带有可选图标的验证状态在 Bootstrap 中本地完成。这是通过给.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 leftaligning icons
- 不包括对左对齐图标的支持
To overcome the cons, I put together this pull-requestwith changes to support left aligned icons. 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:
为了克服这些缺点，我将这个pull-request与支持左对齐图标的更改放在一起。由于这是一个相对较大的变化，它已被推迟到未来的版本中，但如果您今天需要这些功能，这里有一个简单的实施指南：
Just include the these form changes in css(also inlined via hidden stack snippet at the bottom)
*LESS: alternatively, if you are building via less, here's the form changes in less
只需在 css 中包含这些表单更改（也通过底部的隐藏堆栈片段内联）
*LESS：或者，如果您通过 less 构建，这里的表单更改更少
Then, all you have to do is include the class .has-feedback-lefton any group that has the class .has-feedbackin order to left align the icon.
然后，您所要做的就是在拥有该类.has-feedback-left的任何组中包含该类.has-feedback，以便左对齐图标。
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 中的演示
P.S.frizi's suggestionof adding
pointer-events: none;has been added to bootstrap
PS frizi 的添加建议
pointer-events: none;已添加到 bootstrap
Didn't find what you were looking for? Try these similar questions:
没有找到您要找的东西？试试这些类似的问题：
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;
}回答by user
The officialmethod. No custom CSS required :
该官员方法。无需自定义 CSS：
<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/
演示：http: //jsfiddle.net/LS2Ek/1/
This demo is based on an example in Bootstrap docs. Scroll down to "With Optional Icons" here http://getbootstrap.com/css/#forms-control-validation
此演示基于 Bootstrap 文档中的示例。在此处向下滚动到“带有可选图标” http://getbootstrap.com/css/#forms-control-validation
回答by beardofprey
Here's a CSS-only alternative. I set this up for a search field to get an effect similar to Firefox (& a hundred other apps.)
这是一个仅限 CSS 的替代方案。我将其设置为搜索字段，以获得类似于 Firefox（以及其他一百个应用程序）的效果。
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;
}
回答by Garry English
Here is how I did it using only the default bootstrap CSS v3.3.1:
这是我仅使用默认引导 CSS v3.3.1 的方法：
<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>
And this is how it looks:
这是它的外观：
回答by greenbender
This 'cheat' will work with the side effect that the glyphicon class will change the font for the input control.
这种“作弊”会产生副作用，即 glyphicon 类将更改输入控件的字体。
<input class="form-control glyphicon" type="search" placeholder=""/>
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 上测试过）。
.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:
可能是一个更清洁的解决方案：
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=" search" />
<input class="form-control glyphicon" type="text" placeholder=" username" />
<input class="form-control glyphicon" type="password" placeholder=" password" />
回答by Dheeraj
It can be done using classes from the official bootstrap 3.x version, without any custom css.
可以使用官方引导程序 3.x 版本中的类来完成，无需任何自定义 css。
Use input-group-addonbefore the input tag, inside of input-groupthen use any of the glyphicons, here is the code
input-group-addon在输入标签之前使用，然后在里面input-group使用任何字形，这是代码
<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>
Here is the output
这是输出
To customise it further add a couple of lines of custom css to your own custom.css file (adjust padding if needed)
要进一步自定义它，请将几行自定义 css 添加到您自己的 custom.css 文件中（如果需要，调整填充）
.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);
}
By making the background of the input-group-addontransparent and making the left gradient of the input tag to zero the input will have a seamless appearance. Here is the customised output
通过使背景input-group-addon透明并使输入标签的左侧渐变为零，输入将具有无缝外观。这是自定义输出
Here is a jsbin example
这是一个jsbin示例
This will solve the custom css problems of overlapping with labels, alignment while using input-lgand focus on tab issue.
这将解决自定义 css 与标签重叠、使用时对齐input-lg和专注于选项卡问题。
回答by Merlin
If you are using Fontawesomeyou can do this :
如果您使用的是Fontawesome，您可以这样做：
<input type="text" style="font-family:Arial, FontAwesome" placeholder="" />
Result
结果
The complete list of unicode can be found in the The complete Font Awesome 4.6.3 icon reference
完整的 Unicode 列表可以在完整的 Font Awesome 4.6.3 图标参考中找到
回答by mccainz
Here is a non-bootstrap solution that keeps your markup simple by embedding the image representation of the glyphicon directly in the CSS using base64 URI encoding.
这是一个非引导解决方案，通过使用 base64 URI 编码将字形的图像表示直接嵌入到 CSS 中，从而使您的标记保持简单。
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">回答by Richard Cotrina
Here's another way to do it by placing the glyphicon using the :beforepseudo element in CSS.
这是使用:beforeCSS 中的伪元素放置字形的另一种方法。
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;so that the cursor doesn't interfere with the input focus. All the others CSS rules are for centering and adding the proper spacing.
正如@Frizi 所说，我们必须添加pointer-events: none;以便光标不会干扰输入焦点。所有其他 CSS 规则用于居中和添加适当的间距。
The result:
结果：
回答by Angel Patel
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">