如何在输入字段中添加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>

Answer 1

您可以使用其他标记代替input并以正常方式应用FontAwesome.

而不是你input的类型,image你可以使用这个:

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

快速CSS:

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

这是一个快速的小提琴: DEMO

您可以更好地设置样式并将事件功能添加到i对象,您可以使用<button type="submit">对象代替i或使用javascript来执行此操作.

按钮sollution将是这样的:

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

这是我的小提琴更新按钮而不是我: 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来,它应该工作.

链接到FontAwesome ascii代码(cheatsheet):fortawesome.github.io/Font-Awesome/cheatsheet

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

使用inputjsfidde中的元素查看上面的示例:

DEMO

更新: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的评论,链接到更新的小提琴波纹管.谢谢!

Answer 2

这是一个解决方案,使用简单的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>

Answer 3

对于那些想知道如何将FontAwesome图标添加到drupal输入的人,你必须首先解码如下:

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

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

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