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

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


当前回答

下面是一个如何设计字体样式的例子。

.arrow i.a a { 颜色:白色!重要; 字体大小:2.2快速眼动; 透明度:3; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="arrow d-none d-md-block"> <i class="fa fa-angle-down"></i> < / div >

就是这样。

其他回答

text-shadow: 1px 1px 3px rgba(0,0,0,0.5);

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

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

我不建议你使用fa-5x之类的内置字体样式;因为担心他们可能会改变它,你将不得不继续链接你的应用程序代码,以满足最新的标准。你可以通过给每个你想要统一样式的font-awesome类指定相同的类来避免这种情况:

<i class="fa fa-facebook-square fa-sabi-social-icons" aria-hidden="true"></i>
<i class="fa fa-twitter-square fa-sabi-social-icons" aria-hidden="true"></i>
<i class="fa fa-google-plus-square fa-sabi-social-icons" aria-hidden="true"></i>

这里的类是fa-sabi-social-icons

然后在你的css中,你可以使用与普通字体样式相同的css规则来设置字体的样式。 如

.fa-sabi-social-icons {
     color: //your color;
     font-size: // your font-size in px, em or %;
     text-shadow: 2px 2px #FF0000;
}

这将使您的字体非常棒的字体样式

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

对于字体Awesome 5 SVG版本,使用

filter: drop-shadow(0 0 3px rgba(0,0,0,0.7));