如何向输入字段添加Font Awesome图标？ [英] How do I add a Font Awesome icon to input field?

问题描述

如何使用Font Awesome中包含的搜索图标进行输入？我在我的网站上有一个搜索功能（基于PHPmotion），我想用于搜索。

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.

这里是代码：

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

推荐答案

c>输入，并以正常的方式应用FontAwesome。

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

而不是您的输入 image 您可以使用这个：

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

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

快速 CSS ：

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

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

Here is a quick fiddle: DEMO

您可以对它进行一些更好的风格，可以通过使用< button type =submit> 对象而不是 i 或使用javascript。

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.

按钮解决方案如下所示：

The button sollution would be something like this:

<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

here is my fiddle updated with the button instead of i: DEMO

FontAwsome的问题是它的样式表使用：before 伪元素添加图标到元素 - 伪元素不允许在输入元素上不允许。这就是为什么使用FontAwesome正常的方式不能使用输入。

The problem with FontAwsome is that its stylesheet uses :before pseudo-elements to add the icons to an element - and pseudo elements don't work/are not allowed on input elements. This is why using FontAwesome the normal way will not work with input.

是解决方案 - 您可以使用FontAwesome作为常规字体，如下所示：

But there is a solution - you can use FontAwesome as a regular font like so:

CSS：

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

HTML： b

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

字形可以作为值属性。个别字母/图标的ascii代码可以在FontAwesome css文件中找到，您只需要将它们更改为一个HTML ascii数字，例如 \f002 到&＃xf002;

The glyphs can be passed as values of the value attribute. 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 \f002 to  and it should work.

链接到FontAwesome ascii代码 strong>骗局）： fortawesome.github.io/Font-Awesome/cheatsheet

Link to the FontAwesome ascii code (cheatsheet): fortawesome.github.io/Font-Awesome/cheatsheet

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

The size of the icons can be easily adjusted via font-size.

请参阅上面的示例，使用jsfidde中的输入元素：

See the above example using an input element in a jsfidde:

这篇关于如何向输入字段添加Font Awesome图标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！