92

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

8 回答 8

117

You can use another tag instead of input and apply FontAwesome the normal way.

instead of your input with type image you can use this:

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

quick CSS:

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

Here is a quick fiddle: DEMO

您可以更好地设置它的样式并向 i 对象添加事件功能，您可以使用<button type="submit">对象而不是ijavascript 或使用 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;
}

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

更新：在任何标签上使用 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，&#xf002;就可以了。

链接到 FontAwesome ascii 代码（cheatsheet）：fortawesome.github.io/Font-Awesome/cheatsheet

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

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

演示

更新：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 的评论，其中包含更新小提琴的链接。谢谢！

于 2013-04-13T13:49:26.890 回答
48

这是一个使用简单 CSS 和标准字体真棒语法的解决方案，不需要 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>

于 2014-11-04T11:29:17.220 回答
10

对于那些想知道如何将 FontAwesome 图标添加到 drupal 输入的人，您必须首先像这样 decode_entities：

$form['submit'] = array(
'#type' => 'submit',
'#value' => decode_entities('&#xf014;'), // code for FontAwesome trash icon
// etc.
);
于 2014-01-24T16:45:31.673 回答
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;
}

这里的优点是表单仍然具有完整的功能，而无需为不是按钮但看起来像一个的元素添加事件处理程序。

于 2013-04-13T14:02:41.593 回答
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 将抓取图标，但所有非图标文本都将应用所需的字体。

于 2019-10-20T05:50:46.740 回答
0 
.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>
于 2017-07-24T09:11:16.007 回答
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>
于 2020-01-15T11:42:51.073 回答
-4

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

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

}
于 2013-11-12T10:03:06.943 回答