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

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

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

当前回答

试着简单地使用像fa-lg,fa-2x,fa-3x,fa-4x,fa-5x之类的东西来增加相对于容器的图标大小

例如:-

其他回答

图片来源:我可以改变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;
}

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>

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

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

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

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

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

推荐文章