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

如何使用 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>

您可以使用另一个标签代替input并以正常方式应用 FontAwesome。

而不是你的input与类型image你可以使用这个：

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

quick CSS:

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

这是一个快速小提琴：DEMO

您可以更好地设计它并向 i 对象添加事件功能，您可以通过使用<button type="submit">对象而不是i，或使用 JavaScript。

按钮解决方案将是这样的：

<button type="submit" class="icon-search icon-large"></button>

And the CSS:

.icon-search {
    height:32px;
    width:32px;
    border: none;
    cursor: pointer;
    color:white;
    background-color:black;
    position:relative;
}

这是我的小提琴，用按钮而不是 i 更新：DEMO

Update: 在任何标签上使用 FontAwesome

Font Awesome 的问题在于它的样式表使用: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 to 它应该有效。

链接到 FontAwesomeASCII码 (备忘单): fortawesome.github.io/Font-Awesome/cheatsheet

图标的大小可以通过以下方式轻松调整font-size.

请参阅上面的示例，使用inputjsfiddle 中的元素：

DEMO

Update: 真棒字体 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 的评论，其中包含更新的小提琴链接。谢谢！