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

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


当前回答

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

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

其他回答

你也可以添加样式内联:

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

<i class="icon-warning-sign" style="color:red"></i>
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);

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>

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

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

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

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

调整图标大小

我们的Web Fonts + CSS和SVG + JS框架都包括一些基本的控件,用于在页面的UI上下文中调整图标的大小。

你可以用like

<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>

https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons