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

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


当前回答

在FontAwesome 4.0中,类更改为'fa-2x', 'fa-3x'。

其他回答

你也可以添加样式内联:

<i class="icon-ok-sign" style="color:green"></i>

<i class="icon-warning-sign" style="color:red"></i>

正如已经指出的那样,字体很棒的图标是文本,因此您可以使用适当的CSS属性来设置它的样式。例如:

.fa-twitter-square {
    font-size: 15px;
    color: red;
}

如果像我经常遇到的那样,图标大小根本没有变化,那就添加“!”“Important”添加到字体大小属性。

.fa-twitter-square {
    font-size: 15px !important;
    color: red;
}

我不建议你使用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;
}

这将使您的字体非常棒的字体样式

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

例:

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>