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

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

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

当前回答

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

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

其他回答

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

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

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

inyour.css文件:

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

inyour.html文件:

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

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

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

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

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

只需目标字体-很棒的预定义类名

例:

HTML

<i class="fa fa-facebook"></i>

CSS

i.fa {
    color: red;
    font-size: 30px;
}

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

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

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

你也可以添加样式内联:

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

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

推荐文章