如何向文本类型输入框添加象形文字?例如，我想在用户名输入中有'icon-user'，就像这样:
当前回答
您应该能够使用现有的引导类和一些自定义样式来实现这一点。
<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>
编辑图标是通过图标用户类引用的。这个答案是在Bootstrap版本2的时候写的。你可以在下面的页面上看到参考:http://getbootstrap.com/2.3.2/base-css.html#images
其他回答
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">
这里有一个css的替代方案。我设置了一个搜索字段，以获得类似于Firefox(以及其他100个应用程序)的效果。
这是小提琴。
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;
}
您可以使用它的Unicode HTML
所以要添加用户图标，只需添加到占位符属性，或任何您想要的位置。
你可以看看这张小抄。
例子:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <input type="text" class="form-control" 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是输入中常规文本的字体。
下面是一种非引导解决方案，通过使用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">
如果你正在使用Fontawesome，你可以这样做:
<input type="text" style="font-family:Arial, FontAwesome" placeholder="" />
结果
unicode的完整列表可以在The complete Font Awesome 4.6.3图标参考中找到
