将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

回到顶部