我如何从FontAwesome的图标样式的颜色，大小和阴影?
例如，FontAwesome的网站将显示一些白色图标和一些红色图标，但不会显示如何样式它们的CSS……
当前回答
调整图标大小
我们的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
其他回答
请参考链接 http://www.w3schools.com/icons/fontawesome_icons_intro.asp
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>
只需目标字体-很棒的预定义类名
例:
HTML
<i class="fa fa-facebook"></i>
CSS
i.fa {
color: red;
font-size: 30px;
}
有一个非常简单的方法来改变字体Awesome图标的颜色。
<!-- Font Awesome insert code --> <script src="https://use.fontawesome.com/49b98aaeb5.js"></script> <!-- End --> <i class="fa fa-thumbs-up fa-5x" aria-hidden="true" style="color:#00cc6a"></i> <i class="fa fa-thumbs-up fa-4x" aria-hidden="true" style="color:#00cc6a"></i> <i class="fa fa-thumbs-up fa-3x" aria-hidden="true" style="color:#00cc6a"></i> <i class="fa fa-thumbs-up fa-2x" aria-hidden="true" style="color:#00cc6a"></i> <i class="fa fa-thumbs-up" aria-hidden="true" style="color:#00cc6a"></i>
您可以根据自己的喜好更改十六进制代码。 注意:文本颜色也会改变图标的颜色，除非在i标签中有style="color:#00cc6a"。
我不建议你使用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;
}
这将使您的字体非常棒的字体样式
对于字体Awesome 5 SVG版本，使用
filter: drop-shadow(0 0 3px rgba(0,0,0,0.7));
