我如何从FontAwesome的图标样式的颜色,大小和阴影?

例如,FontAwesome的网站将显示一些白色图标和一些红色图标,但不会显示如何样式它们的CSS……


当前回答

只需目标字体-很棒的预定义类名

例:

HTML

<i class="fa fa-facebook"></i> 

CSS

i.fa {
    color: red;
    font-size: 30px;
}

其他回答

如果你同时使用Bootstrap,你可以使用:

<i class="fa fa-check-circle-o fa-5x text-success" ></i>

否则:

<i class="fa fa-check-circle-o fa-5x" style="color:green"></i>

我不建议你使用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'。

使用FA 4.4.0添加

.text-danger
    color: #d9534f

到文档的CSS然后使用

 <i class="fa fa-ban text-danger"></i>

将颜色改为红色。你可以自己设置任何颜色。

简单地说,你可以在css文件中定义一个类,并将其级联到html文件中

<i class="fa fa-plus fa-lg green"></i> 

现在用CSS写下来

.green{ color:green}