我如何从FontAwesome的图标样式的颜色,大小和阴影?
例如,FontAwesome的网站将显示一些白色图标和一些红色图标,但不会显示如何样式它们的CSS……
我如何从FontAwesome的图标样式的颜色,大小和阴影?
例如,FontAwesome的网站将显示一些白色图标和一些红色图标,但不会显示如何样式它们的CSS……
当前回答
看起来像FontAwesome图标颜色响应文本信息,文本错误等。
<div style="font-size: 44px;">
<i class="icon-umbrella icon-large text-error"></i>
</div>
其他回答
我不建议你使用fa-5x之类的内置字体样式;因为担心他们可能会改变它,你将不得不继续链接你的应用程序代码,以满足最新的标准。你可以通过给每个你想要统一样式的font-awesome类指定相同的类来避免这种情况:
<i class="fa fa-facebook-square fa-sabi-social-icons" aria-hidden="true"></i>
<i class="fa fa-twitter-square fa-sabi-social-icons" aria-hidden="true"></i>
<i class="fa fa-google-plus-square fa-sabi-social-icons" aria-hidden="true"></i>
这里的类是fa-sabi-social-icons
然后在你的css中,你可以使用与普通字体样式相同的css规则来设置字体的样式。 如
.fa-sabi-social-icons {
color: //your color;
font-size: // your font-size in px, em or %;
text-shadow: 2px 2px #FF0000;
}
这将使您的字体非常棒的字体样式
在FontAwesome 4.0中,类更改为'fa-2x', 'fa-3x'。
只需目标字体-很棒的预定义类名
例:
HTML
<i class="fa fa-facebook"></i>
CSS
i.fa {
color: red;
font-size: 30px;
}
考虑到它们只是简单的字体,那么你应该能够将它们设置为字体:
#elementID {
color: #fff;
text-shadow: 1px 1px 1px #ccc;
font-size: 1.5em;
}
使用FA 4.4.0添加
.text-danger
color: #d9534f
到文档的CSS然后使用
<i class="fa fa-ban text-danger"></i>
将颜色改为红色。你可以自己设置任何颜色。