如何使用Font Awesome中包含的搜索图标进行输入？我的网站上有一个搜索功能（基于PHPmotion），我想用于搜索。
以下是代码：
<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/default/images/search.jpg" height="30" width="30" border="0" style="float:right;"/>
<div id="searchBoxSuggestions"></div>
</form>
</div>
答案 0 :(得分：101)
您可以使用其他代码而不是input并以正常方式应用FontAwesome。
而不是类型为input的{{1}}，您可以使用此代码：
image快速 CSS ：
<i class="icon-search icon-2x"></i>
这是一个快速的小提琴： DEMO
您可以更好地设置样式并将事件功能添加到i对象，您可以使用.icon-search {
color:white;
background-color:black;
}
对象代替<button type="submit">或使用javascript来执行此操作。
按钮解析将是这样的：
iCSS ：
<button type="submit" class="icon-search icon-large"></button>
这是我的小提琴更新了按钮而不是i： DEMO
FontAwsome的问题在于它的样式表使用.icon-search {
height:32px;
width:32px;
border: none;
cursor: pointer;
color:white;
background-color:black;
position:relative;
}
伪元素将图标添加到元素中 - 而伪元素在:before元素上不起作用/不允许。这就是为什么以正常方式使用FontAwesome将无法使用input。
但是有一个解决方案 - 您可以将FontAwesome用作常规字体，如下所示：
<强> CSS：
input<强> HTML：
input[type="submit"] {
font-family: FontAwesome;
}
字形可以作为<input type="submit" class="search" value="" />
属性的值传递。可以在FontAwesome css文件中找到单个字母/图标的ascii代码，您只需将它们更改为HTML {1}}到value之类的HTML ascii编号，它应该可以正常工作。
链接到FontAwesome ascii代码（ cheatsheet ）：fortawesome.github.io/Font-Awesome/cheatsheet
可以通过\f002轻松调整图标的大小。
使用jsfidde中的元素查看上面的示例：
使用FontAwesome版本5时，此解决方案所需的CSS已更改 - 字体系列名称已更改且必须指定字体粗细：
font-size请参阅@WillFastie的评论，链接到更新的小提琴声。谢谢！
答案 1 :(得分：40)
这是一个解决方案，可以使用简单的CSS和标准字体非常棒的语法，不需要unicode值等。
创建一个<input>代码，后跟一个带有您需要的图标的标准<i>代码。
将相对定位与更高层次的顺序（z-index）一起使用，并将图标移到输入字段的顶部和上方。
（可选）您可以通过标准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="https://maxcdn.bootstrapcdn.com/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>
答案 2 :(得分：10)
对于那些想知道如何将Font Awesome图标添加到drupal输入的人，你必须首先解码：如下所示：
$form['submit'] = array(
'#type' => 'submit',
'#value' => decode_entities(''), // code for FontAwesome trash icon
// etc.
);
答案 3 :(得分：4)
将输入更改为按钮元素，您可以在其上使用Font Awesome类。在演示中字形的对齐并不是很好，但是你明白了：
<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;
}
这里的优点是表单仍然可以完全正常运行，而不必为非按钮但看起来像一个的元素添加事件处理程序。
答案 4 :(得分：1)
类似于最高答案，我在HTML的value =部分中使用了unicode字符，并将FontAwesome作为该输入元素上的字体系列。我唯一要补充的是，最重要的答案没有涵盖，是因为因为我的value元素在图标之后也包含文本，因此将字体系列更改为FontAwesome会使常规文本看起来很糟糕。解决方案只是更改CSS以包括后备字体：
<input type="text" id="datepicker" placeholder="Change Date" value=" Sat Oct 19" readonly="readonly" class="hasDatepicker">
font-family: FontAwesome, Roboto, sans-serif;
这样，FontAwesome会抓住图标，但是所有非图标文本都将应用所需的字体。
答案 5 :(得分：0)
Your question is a bit vague , you need to be more specific on what exactly
you are trying to do.
Generally , this his how you would get data in Angular from the MVC
application.
In Case of MVC/WebAPI , you should use actions to return JSON result back to
the angular service which can then be processed by angular. Example below :
app.factory('myService', function($http) {
var myService = {
GetData: function() {
// $http returns a promise, which has a then function, which also
returns a promise
var promise = $http.get('<ActionURL>').then(function (response) {
// The then function here is an opportunity to modify the response
console.log(response);
// The return value gets picked up by the then in the controller.
return response.data;
});
// Return the promise to the controller
return promise;
}
};
return myService;
});
app.controller('MainCtrl', function( myService,$scope) {
// Call the async method and then do stuff with what is returned inside
our own then function
myService.GetData().then(function(d) {
$scope.data = d;
});
});
After this services is called from the MainCtrl , angular will have the data
from the MVC action available in its $scope.data variable.
答案 6 :(得分：0)
很棒的新字体的简单方法
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="txtSearch" >
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fas fa-search"></i></button>
</div>
</div>
答案 7 :(得分：-4)
使用unicode或fontawesome来处理它，你应该添加一个类如下所示的类，因为输入标记不支持伪类，如：after。这不是一个直接的解决方案
in 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;
}