如何向文本类型输入框添加象形文字?例如，我想在用户名输入中有'icon-user'，就像这样:
当前回答
以下是它在纯Bootstrap 5中的工作原理:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>iconbutton</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"> </head> <body> <div class="d-flex flex-row align-items-center m-4 border rounded"> <i class="fa-solid fa-search mx-2"></i> <input type="text" class="form-control border-0" placeholder="Search"> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
若要删除出现在焦点上的边框，请向输入添加shadow-0。
其他回答
这里有另一种方法，通过在CSS中的伪元素之前使用:来放置象形文字。
工作演示在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。兼容基于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所说，我们必须添加指针事件:none;这样光标就不会干扰到输入焦点。所有其他CSS规则都用于居中和添加适当的间距。
结果:
您应该能够使用现有的引导类和一些自定义样式来实现这一点。
<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
官方的方法。无需自定义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
您可以使用它的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">
