Html 如何将 Font Awesome 图标添加到输入字段？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15988373/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I add a Font Awesome icon to input field?
提问by user2275855
How do I use the search icon included in Font Awesome for input? I have a search feature on my site (based on PHPmotion), that I want to use for the search.
如何使用 Font Awesome 中包含的搜索图标进行输入？我的网站上有一个搜索功能（基于 PHPmotion），我想用于搜索。
Here's the code:
这是代码：
<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>
回答by Martin Turjak
You can use another tag instead of inputand apply FontAwesome the normal way.
您可以使用另一个标签代替input并以正常方式应用 FontAwesome。
instead of your inputwith type imageyou can use this:
你可以使用这个代替你的inputwith 类型image：
<i class="icon-search icon-2x"></i>
quick CSS:
快速CSS：
.icon-search {
color:white;
background-color:black;
}
Here is a quick fiddle: DEMO
这是一个快速的小提琴： DEMO
You can style it a little better and add event functionality, to the i object, which you can do by using a <button type="submit">object instead of i, or with javascript.
您可以更好地设置样式并将事件功能添加到 i 对象，您可以通过使用<button type="submit">对象而不是i, 或使用 javascript 来实现。
The button sollution would be something like this:
按钮解决方案将是这样的：
<button type="submit" class="icon-search icon-large"></button>
And the CSS:
和CSS：
.icon-search {
height:32px;
width:32px;
border: none;
cursor: pointer;
color:white;
background-color:black;
position:relative;
}
here is my fiddle updated with the button instead of i: DEMO
这是我用按钮而不是 i 更新的小提琴： DEMO
Update: Using FontAwesome on any tag
更新：在任何标签上使用 FontAwesome
The problem with FontAwsome is that its stylesheet uses :beforepseudo-elements to add the icons to an element - and pseudo elements don't work/are not allowed on inputelements. This is why using FontAwesome the normal way will not work with input.
FontAwsome 的问题在于它的样式表使用:before伪元素将图标添加到元素 - 并且伪元素不起作用/不允许在input元素上使用。这就是为什么以正常方式使用 FontAwesome 不适用于input.
But there is a solution- you can use FontAwesome as a regular font like so:
但是有一个解决方案- 您可以将 FontAwesome 用作常规字体，如下所示：
CSS:
CSS：
input[type="submit"] {
font-family: FontAwesome;
}
HTML:
HTML：
<input type="submit" class="search" value="" />
The glyphs can be passed as values of the valueattribute. The ascii codes for the individual letters/icons can be found in the FontAwesome css file, you just need to change them into a HTML ascii number like \f002to and it should work.
字形可以作为value属性的值传递。单个字母/图标的 ascii 代码可以在 FontAwesome css 文件中找到，您只需要将它们更改为像\f002to这样的 HTML ascii 数字，它应该可以工作。
Link to the FontAwesome ascii code(cheatsheet): fortawesome.github.io/Font-Awesome/cheatsheet
链接到FontAwesome ASCII码（cheatsheet文件）：fortawesome.github.io/Font-Awesome/cheatsheet
The size of the icons can be easily adjusted via font-size.
可以通过 轻松调整图标的大小font-size。
See the above example using an inputelement in a jsfidde:
请参阅上面使用inputjsfidde 中的元素的示例：
DEMO
演示
Update: FontAwesome 5
更新：FontAwesome 5
With FontAwesome version 5 the CSS required for this solution has changed - the font family name has changed and the font weight must be specified:
在 FontAwesome 版本 5 中，此解决方案所需的 CSS 已更改 - 字体系列名称已更改，并且必须指定字体粗细：
input[type="submit"] {
font-family: "Font Awesome 5 Free"; // for the open access version
font-size: 1.3333333333333333em;
font-weight: 900;
}
See @WillFastie 's comment with link to updated fiddle bellow. Thanks!
请参阅@WillFastie 的评论以及指向下面更新的小提琴的链接。谢谢！
回答by ethanpil
Here is a solution that works with simple CSS and standard font awesome syntax, no need for unicode values, etc.
这是一个使用简单的 CSS 和标准字体很棒的语法的解决方案，不需要 unicode 值等。
Create an
<input>tag followed by a standard<i>tag with the icon you need.Use relative positioning together with a higher layer order (z-index) and move the icon over and on top of the input field.
(Optional) You can make the icon active, to perhaps submit the data, via standard JS.
创建一个
<input>标签，然后是一个<i>带有您需要的图标的标准标签。将相对定位与更高层顺序 (z-index) 一起使用，并将图标移动到输入字段的上方和顶部。
（可选）您可以使图标处于活动状态，以通过标准 JS 提交数据。
See the three code snippets below for the HTML / CSS / JS.
有关 HTML/CSS/JS，请参阅下面的三个代码片段。
Or the same in JSFiddle here: Example: http://jsfiddle.net/ethanpil/ws1g27y3/
或在 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>回答by Tom Appleseed
For those, who are wondering how to get FontAwesome icons to drupal input, you have to decode_entities first like so:
对于那些想知道如何将 FontAwesome 图标输入到 drupal 输入中的人，您必须首先像这样 decode_entities：
$form['submit'] = array(
'#type' => 'submit',
'#value' => decode_entities(''), // code for FontAwesome trash icon
// etc.
);
回答by cimmanon
Change your input to a button element and you can use the Font Awesome classes on it. The alignment of the glyph isn't great in the demo, but you get the idea:
将您的输入更改为按钮元素，您可以在其上使用 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;
}
The advantage here is that the form is still fully functional without having to add event handlers for elements that aren't buttons but look like one.
这里的优点是表单仍然具有完整的功能，而无需为不是按钮但看起来像按钮的元素添加事件处理程序。
回答by Jeff Travilla
Similar to the top answer, I used the unicode character in the value= section of the HTML and called FontAwesome as the font family on that input element. The only thing I'll add that the top answer doesn't cover is that because my value element also had text inside it after the icon, changing the font family to FontAwesome made the regular text look bad. The solution was simply to change the CSS to include fallback fonts:
与最佳答案类似，我在 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;
This way, FontAwesome will grab the icon, but all non-icon text will have the desired font applied.
这样，FontAwesome 将抓取图标，但所有非图标文本都将应用所需的字体。
回答by Ali
simple way for new font awesome
新字体的简单方法真棒
<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>
回答by dxpkumar
.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>
回答by Web Designer cum Promoter
to work this with unicode or fontawesome, you should add a span with class like below, because input tag not support pseudo classes like :after. this is not a direct solution
要与 unicode 或 fontawesome 一起使用，您应该添加一个具有如下类的跨度，因为输入标签不支持像 :after 这样的伪类。这不是一个直接的解决方案
in html:
在 html 中：
<span class="button1 search"></span>
<input name="username">
in css:
在 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;
}
