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.
如何使用字体Awesome中包含的搜索图标进行输入?我在我的站点上有一个搜索功能(基于PHPmotion),我想用于搜索。
Here's the code:
这是代码:
<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>
6 个解决方案
#1
98
You can use another tag instead of input
and apply FontAwesome the normal way.
您可以使用另一个标签代替输入,并以正常的方式使用FontAwesome。
instead of your input
with type image
you can use this:
你可以用这个:
<i class="icon-search icon-2x"></i>
quick CSS:
快速CSS:
.icon-search {
color:white;
background-color:black;
}
Here is a quick fiddle: DEMO
这里有一个快速小提琴:演示
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.
您可以更好地样式化它,并向i对象添加事件功能,您可以使用
The button sollution would be something like this:
这个按钮是这样的:
<button type="submit" class="icon-search icon-large"></button>
And the CSS:
CSS:
.icon-search {
height:32px;
width:32px;
border: none;
cursor: pointer;
color:white;
background-color:black;
position:relative;
}
here is my fiddle updated with the button instead of i: DEMO
这是我的小提琴更新的按钮,而不是i: DEMO
Update: Using FontAwesome on any tag
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
.
FontAwsome的问题是它的样式表使用了:在伪元素添加到元素的图标之前,伪元素不能在输入元素上工作/不允许。这就是为什么使用FontAwesome这种普通的方式不能处理输入。
But there is a solution - you can use FontAwesome as a regular font like so:
但是有一个解决方案——你可以使用FontAwesome作为常规字体,比如:
CSS:
CSS:
input[type="submit"] {
font-family: FontAwesome;
}
HTML:
HTML:
<input type="submit" class="search" value="" />
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.
符号可以作为值属性的值传递。单个字母/图标的ascii码可以在FontAwesome css文件中找到,你只需要把它们变成一个HTML ascii码,比如\f002到它应该工作。
Link to the FontAwesome ascii code (cheatsheet): fortawesome.github.io/Font-Awesome/cheatsheet
链接到FontAwesome ascii码(cheatsheet): fortawesome.github.io/Font-Awesome/cheatsheet。
The size of the icons can be easily adjusted via font-size
.
图标的大小可以通过字体大小轻松调整。
See the above example using an input
element in a jsfidde:
参见上面的示例,使用jsfidde中的输入元素:
DEMO
#2
36
Here is a solution that works with simple CSS and standard font awesome syntax, no need for unicode values, etc.
这里有一个解决方案,可以使用简单的CSS和标准的字体很棒的语法,不需要unicode值,等等。
-
Create an
<input>
tag followed by a standard<i>
tag with the icon you need.创建一个标记,后面跟着一个标准的标记,带有您需要的图标。
-
Use relative positioning together with a higher layer order (z-index) and move the icon over and on top of the input field.
使用相对位置与较高的层序(z-index)一起,并将图标移动到输入字段的上方。
-
(Optional) You can make the icon active, to perhaps submit the data, via standard JS.
(可选)您可以让图标活动,或者通过标准JS提交数据。
See the three code snippets below for the HTML / CSS / JS.
请参阅下面的三个代码片段以获得HTML / CSS / JS。
Or the same in JSFiddle here: Example: http://jsfiddle.net/ethanpil/ws1g27y3/
在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>
#3
9
For those, who are wondering how to get FontAwesome icons to drupal input, you have to decode_entities first like so:
对于那些想知道如何为drupal输入获取FontAwesome图标的人来说,必须先解码_entities,比如:
$form['submit'] = array(
'#type' => 'submit',
'#value' => decode_entities(''), // code for FontAwesome trash icon
// etc.
);
#4
4
Change your input to a button element and you can use the Font Awesome classes on it. The alignment of the glyph isn't great in the demo, but you get the idea:
将输入更改为按钮元素,您可以在其上使用字体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;
}
The advantage here is that the form is still fully functional without having to add event handlers for elements that aren't buttons but look like one.
这里的优点是,表单仍然是功能齐全的,不需要为不是按钮而是看起来像按钮的元素添加事件处理程序。
#5
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>
#6
-4
to work this with unicode or fontawesome, you should add a span with class like below, because input tag not support pseudo classes like :after. this is not a direct solution
为了使用unicode或fontawesome,您应该在下面添加一个span,因为输入标签不支持pseudo类,比如:after。这不是直接解
in html:
在html中:
<span class="button1 search"></span>
<input name="username">
in css:
在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;
}
#1
98
You can use another tag instead of input
and apply FontAwesome the normal way.
您可以使用另一个标签代替输入,并以正常的方式使用FontAwesome。
instead of your input
with type image
you can use this:
你可以用这个:
<i class="icon-search icon-2x"></i>
quick CSS:
快速CSS:
.icon-search {
color:white;
background-color:black;
}
Here is a quick fiddle: DEMO
这里有一个快速小提琴:演示
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.
您可以更好地样式化它,并向i对象添加事件功能,您可以使用
The button sollution would be something like this:
这个按钮是这样的:
<button type="submit" class="icon-search icon-large"></button>
And the CSS:
CSS:
.icon-search {
height:32px;
width:32px;
border: none;
cursor: pointer;
color:white;
background-color:black;
position:relative;
}
here is my fiddle updated with the button instead of i: DEMO
这是我的小提琴更新的按钮,而不是i: DEMO
Update: Using FontAwesome on any tag
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
.
FontAwsome的问题是它的样式表使用了:在伪元素添加到元素的图标之前,伪元素不能在输入元素上工作/不允许。这就是为什么使用FontAwesome这种普通的方式不能处理输入。
But there is a solution - you can use FontAwesome as a regular font like so:
但是有一个解决方案——你可以使用FontAwesome作为常规字体,比如:
CSS:
CSS:
input[type="submit"] {
font-family: FontAwesome;
}
HTML:
HTML:
<input type="submit" class="search" value="" />
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.
符号可以作为值属性的值传递。单个字母/图标的ascii码可以在FontAwesome css文件中找到,你只需要把它们变成一个HTML ascii码,比如\f002到它应该工作。
Link to the FontAwesome ascii code (cheatsheet): fortawesome.github.io/Font-Awesome/cheatsheet
链接到FontAwesome ascii码(cheatsheet): fortawesome.github.io/Font-Awesome/cheatsheet。
The size of the icons can be easily adjusted via font-size
.
图标的大小可以通过字体大小轻松调整。
See the above example using an input
element in a jsfidde:
参见上面的示例,使用jsfidde中的输入元素:
DEMO
#2
36
Here is a solution that works with simple CSS and standard font awesome syntax, no need for unicode values, etc.
这里有一个解决方案,可以使用简单的CSS和标准的字体很棒的语法,不需要unicode值,等等。
-
Create an
<input>
tag followed by a standard<i>
tag with the icon you need.创建一个标记,后面跟着一个标准的标记,带有您需要的图标。
-
Use relative positioning together with a higher layer order (z-index) and move the icon over and on top of the input field.
使用相对位置与较高的层序(z-index)一起,并将图标移动到输入字段的上方。
-
(Optional) You can make the icon active, to perhaps submit the data, via standard JS.
(可选)您可以让图标活动,或者通过标准JS提交数据。
See the three code snippets below for the HTML / CSS / JS.
请参阅下面的三个代码片段以获得HTML / CSS / JS。
Or the same in JSFiddle here: Example: http://jsfiddle.net/ethanpil/ws1g27y3/
在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>
#3
9
For those, who are wondering how to get FontAwesome icons to drupal input, you have to decode_entities first like so:
对于那些想知道如何为drupal输入获取FontAwesome图标的人来说,必须先解码_entities,比如:
$form['submit'] = array(
'#type' => 'submit',
'#value' => decode_entities(''), // code for FontAwesome trash icon
// etc.
);
#4
4
Change your input to a button element and you can use the Font Awesome classes on it. The alignment of the glyph isn't great in the demo, but you get the idea:
将输入更改为按钮元素,您可以在其上使用字体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;
}
The advantage here is that the form is still fully functional without having to add event handlers for elements that aren't buttons but look like one.
这里的优点是,表单仍然是功能齐全的,不需要为不是按钮而是看起来像按钮的元素添加事件处理程序。
#5
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>
#6
-4
to work this with unicode or fontawesome, you should add a span with class like below, because input tag not support pseudo classes like :after. this is not a direct solution
为了使用unicode或fontawesome,您应该在下面添加一个span,因为输入标签不支持pseudo类,比如:after。这不是直接解
in html:
在html中:
<span class="button1 search"></span>
<input name="username">
in css:
在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;
}