将Bootstrap Glyphicon添加到输入框
如何将字形图标添加到文本类型输入框?例如,我想在用户名输入中包含“ icon-user”,
回答:
没有引导程序:
我们将稍后介绍Bootstrap,但这是基本的CSS概念,您可以自己做。正如猎物所指出的那样,您可以通过将CSS绝对放置在输入元素内部的图标来使用CSS。然后在任一侧添加填充,以使文本不会与图标重叠。
因此,对于以下HTML:
<div class=" **inner-addon left-addon** "> <i class="glyphicon glyphicon-user"></i>
<input type="text" class="form-control" />
</div>
您可以使用以下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; }
回答:
: This presumes you’re using glyphicons,
but works equally well with font-awesome. For FA, just replace .glyphicon
with .fa
使用Bootstrap:
正如缓冲区指出的那样,这可以通过在Bootstrap中通过使用带有可选图标的验证状态来完成。这是通过为.form-group元素提供的类.has-feedback和向图标提供的类来完成的.form-control-feedback。
最简单的示例如下所示:
<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>
- 包括对不同表单类型(基本,水平,内联)的支持
- 包括对不同控件大小的支持(默认,小,大)
:
- 不包括对左对齐图标的支持
为了克服弊端,我将请求请求与更改合并在一起以支持左对齐的图标。由于这是一个相对较大的更改,因此已推迟到以后的发行版中,但是如果您今天需要这些功能,这里有一个简单的实施指南:
只需在css中包括这些形式更改(也通过底部的隐藏堆栈片段内联)
* LESS:或者,如果您通过less进行构建,则这是less中的形式更改
然后,您所要做的就是将该类包含在具有该类.has-feedback-left的任何组上,.has-feedback以便使图标左对齐。
由于在不同的表单类型,不同的控件大小,不同的图标集和不同的标签可见性上有许多可能的html配置,因此我创建了一个测试页,该页面显示每个排列的正确HTML设置以及实时演示。
回答:
frizi’ssuggestionof adding pointer-events: none;
has been added tobootstrap
左对齐反馈图标的附加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;
}
以上是 将Bootstrap Glyphicon添加到输入框 的全部内容, 来源链接: utcz.com/qa/408644.html