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

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

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

当前回答

将i标签包装在p或span中，然后您可以使用bootstrap css类

<p class="text-success"><i class="fa fa-check"></i></p>

其他回答

当我试图直接从BootstrapCDN(最简单的方法)使用图标时，我也遇到了同样的问题。然后我下载了CSS文件，并将其复制到我网站的CSS文件夹CSS文件(在“简单方法”字体awesome文档中描述)，一切都开始正常工作。

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

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

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

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

你也可以添加样式内联:

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

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

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。希望这能有所帮助。

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

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

推荐文章