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

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


当前回答

http://fortawesome.github.io/Font-Awesome/examples/

<i class="icon-thumbs-up icon-3x main-color"></i>

在这里,我在CSS中定义了一个全局样式,其中main-color是一个类,在我的例子中,它是浅蓝色色调。我发现在图标上使用内联样式,字体很棒,特别是在你从语义上命名颜色的情况下,即navi -color,如果你想要一个单独的颜色,等等。

在他们网站上的这个例子中,以及我在我的例子中所写的,最新版本的字体Awesome稍微改变了调整大小的语法。以前是:

icon-xxlarge

现在我必须使用:

icon-3x

当然,这完全取决于你在你的环境中安装了什么版本的Font Awesome。希望这能有所帮助。

其他回答

有一个非常简单的方法来改变字体Awesome图标的颜色。

<!-- Font Awesome insert code --> <script src="https://use.fontawesome.com/49b98aaeb5.js"></script> <!-- End --> <i class="fa fa-thumbs-up fa-5x" aria-hidden="true" style="color:#00cc6a"></i> <i class="fa fa-thumbs-up fa-4x" aria-hidden="true" style="color:#00cc6a"></i> <i class="fa fa-thumbs-up fa-3x" aria-hidden="true" style="color:#00cc6a"></i> <i class="fa fa-thumbs-up fa-2x" aria-hidden="true" style="color:#00cc6a"></i> <i class="fa fa-thumbs-up" aria-hidden="true" style="color:#00cc6a"></i>

您可以根据自己的喜好更改十六进制代码。 注意:文本颜色也会改变图标的颜色,除非在i标签中有style="color:#00cc6a"。

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

#elementID {
    color: #fff;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.5em;
}
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);

看起来像FontAwesome图标颜色响应文本信息,文本错误等。

<div style="font-size: 44px;">
   <i class="icon-umbrella icon-large text-error"></i>
</div>

http://fortawesome.github.io/Font-Awesome/examples/

<i class="icon-thumbs-up icon-3x main-color"></i>

在这里,我在CSS中定义了一个全局样式,其中main-color是一个类,在我的例子中,它是浅蓝色色调。我发现在图标上使用内联样式,字体很棒,特别是在你从语义上命名颜色的情况下,即navi -color,如果你想要一个单独的颜色,等等。

在他们网站上的这个例子中,以及我在我的例子中所写的,最新版本的字体Awesome稍微改变了调整大小的语法。以前是:

icon-xxlarge

现在我必须使用:

icon-3x

当然,这完全取决于你在你的环境中安装了什么版本的Font Awesome。希望这能有所帮助。