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

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

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

当前回答

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

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

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

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

其他回答

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

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

<script src="https://use.fontawesome.com/49b98aaeb5.js"></script>

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

inyour.css文件:

    *.icon-white {color: white}
    *.icon-silver {color: silver}

inyour.html文件:

    <a><i class="icon-book icon-white"></i> Book</a>
    <a><i class="icon-ok-sign icon-silver"></i> OK</a>

图片来源:我可以改变Font Awesome的图标颜色吗?

(这个答案建立在那个答案的基础上)

(对于书签图标，例如:)

inyour.css文件:

.icon-bookmark.icon-white {
    color: white;
}

inyour.html文件:

<div class="icon-bookmark icon-white"></div>

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

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

推荐文章