将 Bootstrap Glyphicon 添加到输入框 [英] Add Bootstrap Glyphicon to Input Box
问题描述
如何将字形添加到文本类型输入框?例如，我想在用户名输入中包含icon-user"，如下所示:
Without Bootstrap:
我们稍后会介绍 Bootstrap，但这里有一些基本的 CSS 概念，以便您自己完成此操作.正如
<块引用>注意:这假定您使用的是
<块引用>PS frizi 的建议添加pointer-events: none; 已添加到引导程序
没有找到您要找的内容?试试这些类似的问题:
为左对齐反馈图标添加 CSS
.has-feedback .form-control {右填充: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 {右填充:46px；}.has-feedback-left .form-control {padding-right: 12px;左边距:34px；}.has-feedback-left .form-control.input-sm,.has-feedback-left.form-group-sm .form-control {左边距:30px；}.has-feedback-left .form-control.input-lg,.has-feedback-left.form-group-lg .form-control {左边距:46px；}.has-feedback-left .form-control-feedback {左:0；}.form-control-feedback {行高:34px！重要；}.input-sm + .form-control-feedback,.form-horizontal .form-group-sm .form-control-feedback {宽度:30px；高度:30px；行高:30px！重要；}.input-lg + .form-control-feedback,.form-horizontal .form-group-lg .form-control-feedback {宽度:46px；高度:46px；行高:46px！重要；}.has-feedback label.sr-only ~ .form-control-feedback,.has-feedback label.sr-only ~ div .form-control-feedback {顶部:0；}@media(最小宽度:768px){.form-inline .inline-feedback {位置:相对；显示:内联块；}.form-inline .has-feedback .form-control-feedback {顶部:0；}}.form-horizontal .has-feedback-left .form-control-feedback {左:15px；}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:
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.
So for the following 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:
/* 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
Note: This presumes you're using glyphicons, but works equally well with font-awesome.
For FA, just replace.glyphiconwith.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-group element the class of .has-feedback and the icon the class of .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. 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)
*LESS: alternatively, if you are building via less, here's the form changes in 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.
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.
Here's a demo in Plunker
P.S. frizi's suggestion of adding
pointer-events: none;has been added to bootstrap
Didn't find what you were looking for? Try these similar questions:
Addition CSS for Left Aligned feedback icons
.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;
}
这篇关于将 Bootstrap Glyphicon 添加到输入框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
