如何将Font Awesome图标添加到输入字段？

Question

我该如何在输入框中使用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>

- user2275855

Answer 1

你可以使用另一个标签替换 input，并按照通常的方式应用FontAwesome。

而不是使用类型为 image 的 input 标签，你可以使用以下内容：

<i class="icon-search icon-2x"></i>

快速 CSS：

.icon-search {
    color:white;
    background-color:black;
}

这里有一个快速的演示代码： 演示

你可以稍微调整样式，并向 i 对象添加事件功能，这可以通过使用 <button type="submit"> 对象替代 i 或使用 JavaScript 来完成。

按钮解决方案可能如下所示：

<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;
}

这是我的代码修改后的jsfiddle，其中用按钮替代了图标： 演示

---

更新：在任何标签上使用FontAwesome

FontAwsome的问题在于其样式表使用:before伪元素将图标添加到元素中 - 而伪元素不起作用/不允许在input元素上使用。这就是为什么普通方式使用FontAwesome无法与input一起使用。

但有一个解决办法 - 您可以像这样将FontAwesome用作常规字体：

CSS：

input[type="submit"] {
    font-family: FontAwesome;
}

HTML：

<input type="submit" class="search" value="&#xf002;" />

字形图标可以作为value属性的值传递。每个字母/图标的ASCII码可以在FontAwesome的CSS文件中找到，你只需要将它们转换成HTML ASCII数字，例如\f002转换成，它就可以正常工作。

FontAwesome的ASCII代码（速查表）链接：fortawesome.github.io/Font-Awesome/cheatsheet

图标的大小可以通过font-size轻松调整。

查看上面的示例，其中使用了一个jsfiddle中的input元素：

演示

---

更新：FontAwesome 5

使用FontAwesome 5版本，此解决方案所需的CSS已更改 - 字体系列名称已更改，并且必须指定字重：

input[type="submit"] {
    font-family: "Font Awesome 5 Free"; // for the open access version
    font-size: 1.3333333333333333em;
    font-weight: 900;
}

请参考 @WillFastie 的评论，其中包含下面更新的小样例链接。谢谢！

- Martin Turjak

---

@HTMLDeveloper 问题在于FontAwesome通常的应用方式...它使用:before，因此无法与input或img标签一起使用...但是有一个简单的解决方案-即将FontAwesome作为常规字体使用...请参见我上面更新的解决方案。希望我能赢回您的投票;-) - Martin Turjak

@HTMLDeveloper，你不好啊...他在他的回答中清楚地表明（我检查了所有的编辑），你不能将Font Awesome样式应用于一个输入标签。然后他继续发布了几个不同的解决方案，其中只有一个包括使用按钮。而你却使用了他的完全相同的答案。这样做很不好。 - o_O

@Vadorequest 谢谢！好主意...我已经在答案中添加了链接 ^_^ - Martin Turjak

+1 牛逼的技巧！！谢谢，我一直在想为什么  没有显示在输入框中，感谢你让我意识到需要添加 font-family:FontAwesome; 你救了我 :D - itsme

如果您想使用JavaScript或jQuery设置此项，请使用Unicode变体：$（“input.search”）.val（“\ uf002”）; - Jamie Chong

Answer 2

以下是一个使用简单CSS和标准Font Awesome语法的解决方案，无需使用Unicode值等其他方法。

1. 创建一个<input>标签，后跟所需图标的标准<i>标签。
2. 使用相对定位和更高的层级顺序（z-index），将图标移到并覆盖在输入字段上方。
3. （可选）您可以通过标准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>

- ethanpil

Answer 3

如果你想知道如何在Drupal表单中使用FontAwesome图标，你需要先进行解码（decode_entities），如下所示：

$form['submit'] = array(
'#type' => 'submit',
'#value' => decode_entities(''), // code for FontAwesome trash icon
// etc.
);

- Tom Appleseed

Answer 4

将您的输入更改为按钮元素，您可以在其上使用Font Awesome类。 在演示中字形的对齐不是很好，但您已经有了想法。 http://tinker.io/802b6/1

<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;
}

这里的优点是，即使不为非按钮元素添加事件处理程序（但看起来像按钮），表单仍然完全可用。

- cimmanon

Answer 5

与最佳答案类似，我在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 将获取图标，但所有非图标文本都将应用所需的字体。

- Jeff Travilla

Answer 6

.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>

- dxpkumar

Answer 7

新的 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>

- Ali

Answer 8

如果要使用Unicode或FontAwesome，您应该添加一个类似下面的带有类的span，因为输入标签不支持像:after这样的伪类。这不是一个直接的解决方案。

在HTML中：

   <span class="button1 search"></span>
<input name="username">

in 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;   

}

- Web Designer cum Promoter

---

问题要求输入标签，您为span标签回答了。 - o_O

实际上，只有关于将其应用于文本输入而不是按钮的答案，所以+1。 - BorisOkunskiy

@incarnate 实际上，这个答案并没有将样式应用于输入字段，而是应用于一个 span 元素。而 [MartinTurjak 在他的 上面的回答 中提供了完整的解决方案（以及其他替代方案）。 - BobbyZ

我在这里真正指的是_text_输入，因为主题说明了“如何将Font Awesome图标添加到输入字段？”——并没有提及按钮。MartinTurjak描述了好的按钮样式方式，而不是文本字段。 - BorisOkunskiy