我如何从FontAwesome的图标样式的颜色,大小和阴影?
例如,FontAwesome的网站将显示一些白色图标和一些红色图标,但不会显示如何样式它们的CSS……
我如何从FontAwesome的图标样式的颜色,大小和阴影?
例如,FontAwesome的网站将显示一些白色图标和一些红色图标,但不会显示如何样式它们的CSS……
当前回答
看起来像FontAwesome图标颜色响应文本信息,文本错误等。
<div style="font-size: 44px;">
<i class="icon-umbrella icon-large text-error"></i>
</div>
其他回答
将i标签包装在p或span中,然后您可以使用bootstrap css类
<p class="text-success"><i class="fa fa-check"></i></p>
下面是一个如何设计字体样式的例子。
.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 >
就是这样。
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。希望这能有所帮助。
如果你同时使用Bootstrap,你可以使用:
<i class="fa fa-check-circle-o fa-5x text-success" ></i>
否则:
<i class="fa fa-check-circle-o fa-5x" style="color:green"></i>
简单地说,你可以在css文件中定义一个类,并将其级联到html文件中
<i class="fa fa-plus fa-lg green"></i>
现在用CSS写下来
.green{ color:green}