将图标放在input元素的表单中
如何在表单的input元素中放置图标？
现场版本： 潮汐力主题
你链接的网站使用了CSS技巧的组合来解决这个问题。 首先，它使用<input>元素的背景图像。 然后，为了将光标移到，它使用padding-left 。
换句话说，他们有这两个CSS规则：
background: url(images/comment-author.gif) no-repeat scroll 7px 7px; padding-left:30px;
别人发布的CSS解决scheme是实现这一目标的最好方法。
如果这应该给你任何问题（阅读IE6），你也可以在div中使用无边框input。
<div style="border: 1px solid #DDD;"> <img src="icon.png"/> <input style="border: none;"/> </div>
不是“干净”，但应该在旧版浏览器上工作。
你可以试试这个：
input[type='text'] { background-image: url(images/comment-author.gif); background-position: 7px 7px; background-repeat: no-repeat; }
我觉得这是最好的，最干净的解决scheme。 在input元素上使用文本缩进
CSS：
#icon{ background-image:url(..http://img.dovov.comicons/dollar.png); background-repeat: no-repeat; background-position: 2px 3px; }
HTML：
<input id="icon" style="text-indent:17px;" type="text" placeholder="Username" />
没有背景图像的解决scheme：
#input_container { position:relative; padding:0 0 0 20px; margin:0 20px; background:#ddd; direction: rtl; width: 200px; } #input { height:20px; margin:0; padding-right: 30px; width: 100%; } #input_img { position:absolute; bottom:2px; right:5px; width:24px; height:24px; }
<div id="input_container"> <input type="text" id="input" value> <img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img"> </div>
.icon{ background: url(1.jpg) no-repeat; padding-left:25px; }
将以上标记添加到您的CSS文件并使用指定的类。
只需在CSS中使用背景属性。
<input id="foo" type="text" /> #foo { background: url(/img/foo.png); }
与font-icon一起使用
<input name="foo" type="text" placeholder="">
要么
<input id="foo" type="text" /> #foo::before { font-family: 'FontAwesome'; color:red; position: relative; left: -5px; content: "\f007"; }
<label for="fileEdit"> <i class="fa fa-cloud-upload"> </i> <input id="fileEdit" class="hidden" type="file" name="addImg" ng-file-change="onImageChange( $files )" ng-multiple="false" accept="{{ contentType }}"/> </label>
例如，你可以使用这个：带有隐藏input的标签（图标存在）。
你可以使用button，这更容易理解。
<button type="submit" form="id-of-form" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</button>
在这里， "fa fa-shopping-cart"是购物车图标。
结果：
添加到购物车
