更新时间:2023-12-04 09:43:46
c>输入,并以正常的方式应用FontAwesome。
You can use another tag instead of input
and apply FontAwesome the normal way.
而不是您的输入
image $ c>您可以使用这个:
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;
}
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="" />
字形可以作为值
属性。个别字母/图标的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: