我如何从FontAwesome的图标样式的颜色,大小和阴影?
例如,FontAwesome的网站将显示一些白色图标和一些红色图标,但不会显示如何样式它们的CSS……
我如何从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>