html在文本框添加相机图标,[Bootstrap]Bootstrap中如何给文本框添加图标？

问题描述

如题，在Bootstrap中，如何为一个文本框添加图标呢？比如有实现一个用户名的文本框，如下图：

方案一

参考官方的示例代码(无需写其他的CSS样式)：

方案二

不使用 Bootstrap实现，

HTML:

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; }注：请引用 font-awesome 图标库， 点击查看完整示例

使用 Bootstrap:

Username

方案三

HTML：

CSS:

.form-control {

padding-right: 30px;

}

.form-control + .glyphicon {

position: absolute;

right: 0;

padding: 8px 27px;

}

方案四

Start:

方案六

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=);

}

HTML:

运行效果：