我如何从FontAwesome的图标样式的颜色,大小和阴影?
例如,FontAwesome的网站将显示一些白色图标和一些红色图标,但不会显示如何样式它们的CSS……
我如何从FontAwesome的图标样式的颜色,大小和阴影?
例如,FontAwesome的网站将显示一些白色图标和一些红色图标,但不会显示如何样式它们的CSS……
当前回答
尺寸:fa-lg, fa-2x, fa-3x, fa-4x, fa-5x For Color: <i class="fa fa-link fa-lg" aria-hidden="true"style=" Color: indianred"></i> . 对于阴影:.fa-linkedin-square{text-shadow: 3px 6px #272634;}
其他回答
使用FA 4.4.0添加
.text-danger
color: #d9534f
到文档的CSS然后使用
<i class="fa fa-ban text-danger"></i>
将颜色改为红色。你可以自己设置任何颜色。
图片来源:我可以改变Font Awesome的图标颜色吗?
(这个答案建立在那个答案的基础上)
(对于书签图标,例如:)
inyour.css文件:
.icon-bookmark.icon-white {
color: white;
}
inyour.html文件:
<div class="icon-bookmark icon-white"></div>
试着简单地使用像fa-lg,fa-2x,fa-3x,fa-4x,fa-5x之类的东西来增加相对于容器的图标大小
例如:-
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。希望这能有所帮助。
动态更改.fa-xxx图标的css属性:
<li class="nws">
<a href="#NewsModal" class="urgent" title="' + title + '" onclick=""><span class="label label-icon label-danger"><i class="fa fa-bolt"></i></span>'
</a>
</li>
<script>
$(document).ready(function(){
$('li.nws').on("focusin", function(){
$('.fa-bolt').addClass('lightning');
});
});
</script>
<style>
.lightning{ /*do something cool like shutter*/}
</style>