如何样式图标的颜色，大小，和阴影的FontAwesome图标

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

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

当前回答

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

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

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

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

其他回答

对于字体Awesome 5 SVG版本，使用

filter: drop-shadow(0 0 3px rgba(0,0,0,0.7));

考虑到它们只是简单的字体，那么你应该能够将它们设置为字体:

#elementID {
    color: #fff;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.5em;
}

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

例:

HTML

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

CSS

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

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

text-shadow: 1px 1px 3px rgba(0,0,0,0.5);

推荐文章