将 Bootstrap Glyphicon 添加到输入框
Posted
技术标签:
【中文标题】将 Bootstrap Glyphicon 添加到输入框【英文标题】:Add Bootstrap Glyphicon to Input Box 【发布时间】:2013-09-21 05:58:44 【问题描述】:如何在文本类型输入框中添加字形图标?例如,我想在用户名输入中包含“icon-user”,如下所示:
【问题讨论】:
这是我的替代解决方案(2014 年)JSFiddle [jsfiddle.net/rcotrina94/cyCFS/272] 迟到了,但请查看我的答案,我只使用引导程序来获得这种效果,并更改颜色和边框,我使用了两行 css。它解决了答案部分***.com/a/40945821/2914407 中讨论的其他问题 【参考方案1】:没有引导:
我们稍后会介绍 Bootstrap,但这里有一些基本的 CSS 概念,以便您自己完成。作为beard of prey points out,您可以通过将图标绝对定位在输入元素内部来使用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;
Demo in Plunker
注意:这假定您使用的是glyphicons,但同样适用于font-awesome。 对于 FA,只需将
.glyphicon
替换为.fa
使用引导程序:
作为buffer points out,这可以通过使用Validation States with Optional Icons 在Bootstrap 中本地完成。这是通过将.has-feedback
类赋予.form-group
元素和.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>
优点:
包括对不同表单类型(基本、水平、内联)的支持 包括对不同控件大小(默认、小、大)的支持缺点:
不支持左对齐图标为了克服这些缺点,我将这个pull-request 与支持左对齐图标的更改放在一起。由于这是一个比较大的变化,它已经被推迟到未来的版本中,但如果您今天需要这些功能,这里有一个简单的实施指南:
只需包含 these form changes in css(也通过底部的隐藏堆栈 sn-p 内联)*LESS:或者,如果您是 building via less,这里是 @ 987654331@
然后,您所要做的就是在具有 .has-feedback
类的任何组中包含类 .has-feedback-left
,以便使图标左对齐。
由于在不同的表单类型、不同的控件大小、不同的图标集和不同的标签可见性上有很多可能的 html 配置,我创建了一个测试页面,该页面显示每个排列的正确 HTML 集以及现场演示.
Here's a demo in Plunker
P.S. frizi's suggestion 的添加
pointer-events: none;
已经是added to bootstrap
没有找到您要找的东西?试试这些类似的问题:
Add Twitter Bootstrap icon to Input box Put search icon near textbox bootstrap为左对齐反馈图标添加 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;
【讨论】:
查看我的编辑,我已经使focusedInput的css选择器更加明确,否则它会被.input-group-addon覆盖。 @MichelMüller,我不确定我是否在您建议的编辑中看到了价值。.focusedInput
类是在 .input-group-addon
之后定义的,因此当样式表 Cascade 关闭时,后面的样式应该优先。你能更好地描述导致这个问题的场景吗?
我建议添加“pointer-events: none;”对于图标,因为默认情况下它们会干扰输入焦点。
@Leandro,It sure does!。只是因为 FontAwesome 在版本 4 中引入了重大更改。如果要从 3.x 升级到 4.x,则必须将 <i class="icon-user"></i>
更改为 <i class="fa fa-user"></i>
。每当您考虑更新外部库时,请务必阅读发行说明和新文档,以确定您的应用是否仍然兼容或需要升级。
@Leando,您可以阅读有关new naming conventions in FA 4.0 和full migration guide from 3.21 to 4 的更多信息【参考方案2】:
官方方法。无需自定义 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>
演示:http://jsfiddle.net/yajf3b7q
此演示基于 Bootstrap 文档中的示例。在此处向下滚动到“带有可选图标”http://getbootstrap.com/css/#forms-control-validation
【讨论】:
+1 - 在 bootstrap 中内置原生方法绝对不错。虽然这在问题要求的左对齐图标方面并不那么热门,但绝对是一个好方法。 将left:0
添加到 glyphicon 类应该注意左对齐。 jsfiddle.net/LS2Ek/30 。不过,我喜欢你的大纲 + box-shadow 方法。看起来很整洁!
我最初也是这么想的,但是你最终会在不同的情况下重新创建大量的 CSS 工作。如果你add a label,你会看到some problems。在内联表单上,left:0
不再标识输入的开始。此外,您需要在输入的左侧添加填充,并在右侧将其删除。尽管如此,一个非常好的和干净的解决方案。我认为识别输入的左侧是困难的部分,这就是带有position:relative
的包装器派上用场的地方。
您应该将此补丁添加到引导程序。这是一个方便且经常使用的功能。【参考方案3】:
这是一个纯 CSS 的替代方案。我为搜索字段设置了这个,以获得类似于 Firefox(以及其他一百个应用程序)的效果。
Here's a fiddle.
HTML
<div class="col-md-4">
<input class="form-control" type="search" />
<span class="glyphicon glyphicon-search"></span>
</div>
CSS
.form-control
padding-right: 30px;
.form-control + .glyphicon
position: absolute;
right: 0;
padding: 8px 27px;
【讨论】:
+1 很棒的解决方案。我将它改编成左右实用程序类,但绝对是正确的方法 是的,如此简单而完美【参考方案4】:可以使用官方 bootstrap 3.x 版本中的类来完成,无需任何自定义 css。
在输入标记之前使用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>
这是输出
要对其进行自定义,请在您自己的 custom.css 文件中进一步添加几行自定义 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);
通过使input-group-addon
的背景透明并使输入标签的左渐变为零,输入将具有无缝外观。这是自定义输出
这是一个jsbinexample
这将解决自定义 css 与标签重叠的问题,使用input-lg
时对齐和专注于标签问题。
【讨论】:
【参考方案5】:这是我仅使用默认引导 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>
这就是它的外观:
【讨论】:
【参考方案6】:如果您使用 Fontawesome,您可以这样做:
<input type="text" style="font-family:Arial, FontAwesome" placeholder="" />
结果
完整的unicode列表见The complete Font Awesome 4.6.3 icon reference
【讨论】:
【参考方案7】:这种“作弊”会产生副作用,即 glyphicon 类会改变输入控件的字体。
Fiddle
<input class="form-control glyphicon" type="search" placeholder=""/>
如果你想摆脱副作用,你可以删除“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";
可能是更清洁的解决方案:
Fiddle
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
<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" />
【讨论】:
【参考方案8】:这是一个非引导解决方案,通过使用 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">
【讨论】:
【参考方案9】: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">
【讨论】:
很棒的“jugad”,但这对于设置自定义图标也非常有用。谢谢。【参考方案10】:这是另一种方法,即使用 CSS 中的 :before
伪元素放置字形图标。
Working demo in jsFiddle
对于这个 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>
使用这个 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;
正如@Frizi 所说,我们必须添加pointer-events: none;
以便光标不会干扰输入焦点。所有其他 CSS 规则都用于居中和添加适当的间距。
结果:
【讨论】:
【参考方案11】:你可以使用它的 Unicode HTML
所以要添加用户图标,只需将&#xe008;
添加到placeholder
属性,或添加到任何您想要的位置。
您可能需要检查this cheat sheet。
例子:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<input type="text" class="form-control" placeholder=" placeholder..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="text" class="form-control" value=" value..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="submit" class="btn btn-primary" value=" submit-button" style="font-family: 'Glyphicons Halflings', Arial">
不要忘记将输入的字体设置为 Glyphicon 字体,使用 以下代码:
font-family: 'Glyphicons Halflings', Arial
,其中 Arial 是输入中常规文本的字体。
【讨论】:
【参考方案12】:使用 Bootstrap 4 测试。
获取form-control
,并将is-valid
添加到其类中。注意控件如何变为绿色,但更重要的是,注意控件右侧的复选标记图标?这就是我们想要的!
例子:
.my-icon
padding-right: calc(1.5em + .75rem);
background-image: url('https://use.fontawesome.com/releases/v5.8.2/svgs/regular/calendar-alt.svg');
background-repeat: no-repeat;
background-position: center right calc(.375em + .1875rem);
background-size: calc(.75em + .375rem) calc(.75em + .375rem);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-md-5">
<input type="text" id="date" class="form-control my-icon" placeholder="Select...">
</div>
</div>
【讨论】:
您好,您好,您是从哪里获得此链接的? use.fontawesome.com/releases/v5.8.2/svgs/regular/…我找不到其他图标的类似链接。 啊,不记得了。但是,这个技巧会奏效,您可以使用任何图标,只要它来自 5.8.2 版本。你可以在这里看到这些图标:fontawesome.com/icons?d=gallery&v=5.8.0,5.8.2【参考方案13】:对于这种情况,我也有一个使用 Bootstrap 3.3.5 的决定:
<div class="col-sm-5">
<label for="date">
<input type="date" placeholder="Date" id="date" class="form-control">
</label>
<i class="glyphicon glyphicon-calendar col-sm-pull-2"></i>
</div>
输入时我有这样的东西:
【讨论】:
【参考方案14】:如果你有幸只需要现代浏览器:试试 css transform translate。这不需要包装器,并且可以自定义,以便您可以为 input[type=number] 留出更多间距以容纳输入微调器,或将其移动到句柄的左侧。
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
.is-invalid
height: 30px;
box-sizing: border-box;
.is-invalid-x
font-size:27px;
vertical-align:middle;
color: red;
top: initial;
transform: translateX(-100%);
<h1>Tasty Field Validation Icons using only css transform</h1>
<label>I am just a poor boy nobody loves me</label>
<input class="is-invalid"><span class="glyphicon glyphicon-exclamation-sign is-invalid-x"></span>
http://codepen.io/anon/pen/RPRmNq?editors=110
【讨论】:
【参考方案15】:您应该能够使用现有的引导类和一些自定义样式来做到这一点。
<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>
编辑 该图标是通过icon-user
类引用的。这个答案是在Bootstrap第2版的时候写的,可以在下面的页面看到参考:http://getbootstrap.com/2.3.2/base-css.html#images
【讨论】:
在这个答案中看不到引导字形图标 @Kirby,图标是通过 icon-user 类引用的。这个答案是在 Bootstrap 版本 2 的时候写的。你可以在下一页看到参考 - getbootstrap.com/2.3.2/base-css.html#images以上是关于将 Bootstrap Glyphicon 添加到输入框的主要内容,如果未能解决你的问题,请参考以下文章
在 CSS 中使用 glyphicon 作为背景图像:rails 4 + bootstrap 3
吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-star
吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-heart
吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-tags
吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-repeat