如何将字体真棒图标添加到input字段？
如何使用Font Awesome中包含的search图标进行input？ 我在我的网站上有一个searchfunction（基于PHPmotion），我想用于search。
代码如下：
<div id="search-bar"> <form method="get" action="search.php" autocomplete="off" name="form_search"> <input type="hidden" name="type" value="videos" /> <input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this, 'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold; font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; float:left; border: 1px solid black; background-color: #ffffff" /> <input type="image" src="http://viddir.com/themes/defaulthttp://img.dovov.comsearch.jpg" height="30" width="30" border="0" style="float:right;"/> <div id="searchBoxSuggestions"></div> </form> </div> 您可以使用另一个标签，而不是input并以正常方式应用FontAwesome。
而不是你input的typesimage你可以使用这个：
<i class="icon-search icon-2x"></i>
快速CSS ：
.icon-search { color:white; background-color:black; }
这是一个快速小提琴： DEMO
你可以把它devise得更好一些，并添加事件function到i对象，你可以通过使用<button type="submit">对象来代替i ，或者使用javascript。
button溶剂会是这样的：
<button type="submit" class="icon-search icon-large"></button>
而CSS ：
.icon-search { height:32px; width:32px; border: none; cursor: pointer; color:white; background-color:black; position:relative; }
这里是我的小提琴更新与button，而不是我： DEMO
更新： 在任何标签上使用FontAwesome
FontAwsome的问题在于它的样式表使用:before伪元素:before将图标添加到元素 – 伪元素不工作/不允许input元素。 这就是为什么使用FontAwesome正常的方式不能用于input 。
但有一个解决scheme – 您可以使用FontAwesome作为常规字体，如下所示：
CSS：
input[type="submit"] { font-family: FontAwesome; }
HTML：
<input type="submit" class="search" value="" />
字形可以作为值属性的value传递。 单个字母/图标的ascii代码可以在FontAwesome的css文件中find，你只需要把它们改成一个HTML ascii数字，比如\f002到 它应该工作。
链接到FontAwesome ascii代码 （ cheatsheet ）： fortawesome.github.io/Font-Awesome/cheatsheet
图标的大小可以通过font-size轻松调整。
使用jsfidde中的input元素来查看上面的示例：
DEMO
这是一个解决scheme，使用简单的CSS和标准字体真棒语法，不需要Unicode值等。
-
创build一个
<input>标签，后跟标准的<i>标签和你需要的图标。 -
使用相对定位和更高层顺序（z-index）并将图标移到input字段的顶部。
-
（可选）您可以使图标处于活动状态，以便通过标准的JS提交数据。
请参阅以下三个HTML / CSS / JS代码片段。
或者在这里JSFiddle相同：例如： http : //jsfiddle.net/ethanpil/ws1g27y3/
$('#filtersubmit').click(function() { alert('Searching for ' + $('#filter').val()); });
#filtersubmit { position: relative; z-index: 1; left: -25px; top: 1px; color: #7B7B7B; cursor: pointer; width: 0; }
<link href="font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="filter" type="text" placeholder="Search" /> <i id="filtersubmit" class="fa fa-search"></i>
对于那些想知道如何将FontAwesome图标转换为Drupalinput的人来说，首先需要decode_entities，如下所示：
$form['submit'] = array( '#type' => 'submit', '#value' => decode_entities(''), // code for FontAwesome trash icon // etc. );
改变你的input到一个button元素，你可以使用Font Awesome类。 在演示中，字形的alignment方式不是很好，但是你明白了：
<div id="search-bar"> <form method="get" action="search.php" autocomplete="off" name="form_search"> <input type="hidden" name="type" value="videos" /> <input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this, 'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold; font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; border: 1px solid black; background-color: #ffffff" /><!-- --><button class="icon-search">Search</button> <div id="searchBoxSuggestions"></div> </form> </div> #search-bar .icon-search { width: 30px; height: 30px; background: black; color: white; border: none; overflow: hidden; vertical-align: middle; padding: 0; } #search-bar .icon-search:before { display: inline-block; width: 30px; height: 30px; }
这样做的好处是，表单仍然是完整的function，而不必添加事件处理程序的元素是不是button，但看起来像一个。
.fa-file-o { position: absolute; left: 50px; top: 15px; color: #ffffff } <div> <span class="fa fa-file-o"></span> <input type="button" name="" value="IMPORT FILE"/> </div>
要使用unicode或fontawesome来处理这个问题，你应该像下面的类一样添加一个span，因为input标签不支持伪类：after。 这不是一个直接的解决scheme
在html中：
<span class="button1 search"></span> <input name="username">
在CSS中：
.button1 { background-color: #B9D5AD; border-radius: 0.2em 0 0 0.2em; box-shadow: 1px 0 0 rgba(0, 0, 0, 0.5), 2px 0 0 rgba(255, 255, 255, 0.5); pointer-events: none; margin:1px 12px; border-radius: 0.2em; color: #333333; cursor: pointer; position: absolute; padding: 3px; text-decoration: none; }
