我如何从FontAwesome的图标样式的颜色,大小和阴影?
例如,FontAwesome的网站将显示一些白色图标和一些红色图标,但不会显示如何样式它们的CSS……
我如何从FontAwesome的图标样式的颜色,大小和阴影?
例如,FontAwesome的网站将显示一些白色图标和一些红色图标,但不会显示如何样式它们的CSS……
当前回答
请参考链接 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>
其他回答
有一个非常简单的方法来改变字体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"。
调整图标大小
我们的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://fortawesome.github.io/Font-Awesome/examples/
<i class="icon-thumbs-up icon-3x main-color"></i>
在这里,我在CSS中定义了一个全局样式,其中main-color是一个类,在我的例子中,它是浅蓝色色调。我发现在图标上使用内联样式,字体很棒,特别是在你从语义上命名颜色的情况下,即navi -color,如果你想要一个单独的颜色,等等。
在他们网站上的这个例子中,以及我在我的例子中所写的,最新版本的字体Awesome稍微改变了调整大小的语法。以前是:
icon-xxlarge
现在我必须使用:
icon-3x
当然,这完全取决于你在你的环境中安装了什么版本的Font Awesome。希望这能有所帮助。
看起来像FontAwesome图标颜色响应文本信息,文本错误等。
<div style="font-size: 44px;">
<i class="icon-umbrella icon-large text-error"></i>
</div>
在FontAwesome 4.0中,类更改为'fa-2x', 'fa-3x'。