添加Bootstrap字形input框
我怎样才能添加一个文字typesinput框的graphics？ 例如，我想在用户名input中使用“icon-user”，如下所示：
没有Bootstrap：
我们将在一秒钟之内进入Bootstrap，但是为了做到这一点，下面是基本的CSS概念。 由于猎物指出 ，你可以通过绝对定位input元素内的图标与CSS做到这一点。 然后添加填充到任何一边，使文本不与图标重叠。
所以对于下面的HTML：
<div class=" inner-addon left-addon "> <i class="glyphicon glyphicon-user"></i> <input type="text" class="form-control" /> </div> 您可以使用下面的CSS左右alignment字形：
/* 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; }
在Plunker演示
注意 ：这假定你正在使用graphics ，但是与字体真棒一样好。
对于FA，只需用.glyphiconreplace.fa
使用Bootstrap：
正如缓冲区指出的那样 ，这可以通过使用具有可选图标的validation状态在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>
优点 ：
- 包括支持不同的表单types（基本，水平，内联）
- 包括支持不同的控制尺寸（默认，小，大）
缺点 ：
- 不包括对左alignment图标的支持
为了克服这个缺点，我把这个拉取请求放在一起，并且支持左alignment的图标。 由于它是一个相对较大的变化，它已经推迟到将来的版本，但如果你今天需要这些function，这里有一个简单的实施指南：
如果您使用较less，只需将这些更改包括在您的项目中。 如果你使用的不多，请使用任何在线的LESS编译器来获取文件并将其转换为CSS。
然后，所有你需要做的就是将课堂.has-feedback-left给所有具有课堂.has-feedback-left小组，以便左alignment图标。
由于在不同的表单types，不同的控件大小，不同的图标集和不同的标签可见性上有很多可能的HTMLconfiguration，我创build了一个testing页面，显示每个排列的正确HTML集合以及现场演示。
这里是一个Plunker演示
PS frizi添加
pointer-events: none;的build议pointer-events: none;已被添加到引导
没有find你要找的东西 ？ 试试这些类似的问题：
- 将Twitter Bootstrap图标添加到input框
- 将search图标放在文本框引导程序附近
官方的方法。 不需要自定义的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/LS2Ek/1/
此演示基于Bootstrap文档中的一个示例。 向下滚动到“With Optional Icons”（ http://getbootstrap.com/css/#forms-control-validation）;
这是一个纯CSS的select。 我将其设置为search字段以获得与Firefox类似的效果（和另外一百个应用程序）。
这是一个小提琴 。
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; }
以下是我如何使用默认引导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>
这就是它的外观：
这个“作弊”将与glyphicon类将改变input控件的字体的副作用一起工作。
小提琴
<input class="form-control glyphicon" type="search" placeholder=""/>
如果你想摆脱副作用，你可以删除“glyphicon”类，并添加下面的CSS（可能有更好的方式来设置占位符伪元素，我只在Chrome上testing过）。
小提琴
.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"; }
可能是一个更清洁的解决scheme：
小提琴
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" />
这是一个非引导解决scheme，通过使用base64 URI编码将graphics的图像表示直接embedded到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">
它可以使用官方bootstrap 3.x版本的类来完成，没有任何自定义的CSS。
在input标签之前使用input-group-addon ，在input-group使用任何的glyphicons，这里是代码
<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文件中添加几行custoom 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的背景变为透明，并使input标签的左梯度变为零，input将具有无缝的外观。 这是定制的输出
这是一个jsbin的例子
这将解决自定义与lables重叠的css问题，同时使用input-lgalignment并关注标签问题。
如果你使用Fontawesome，你可以这样做：
<input type="text" style="font-family:Arial, FontAwesome" placeholder="" />
结果
完整的unicode列表可以在完整的Font Awesome 4.6.3图标参考中find
下面是通过在CSS中使用:before伪元素放置glyphicon的另一种方法。
在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; 以便光标不会干扰input焦点。 所有其他的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">
对于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>
在input我有这样的事情： 
如果你足够幸运，只需要现代浏览器：尝试CSS转换翻译。 这不需要包装，并且可以进行自定义，以便您可以允许更多的input间距[type = number]来容纳input微调器，或者将其移动到手柄的左侧。
@import url("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>
你应该可以用现有的引导类和一些自定义的样式来做到这一点。
<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
你可以使用它的Unicode HTML
所以要添加一个用户图标，只需添加 到placeholder属性，或任何你想要它。
你可能想检查这张备忘单 。
例：
<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">
