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

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


当前回答

inyour.css文件:

    *.icon-white {color: white}
    *.icon-silver {color: silver}

inyour.html文件:

    <a><i class="icon-book icon-white"></i> Book</a>
    <a><i class="icon-ok-sign icon-silver"></i> OK</a>

其他回答

inyour.css文件:

    *.icon-white {color: white}
    *.icon-silver {color: silver}

inyour.html文件:

    <a><i class="icon-book icon-white"></i> Book</a>
    <a><i class="icon-ok-sign icon-silver"></i> OK</a>

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

使用FA 4.4.0添加

.text-danger
    color: #d9534f

到文档的CSS然后使用

 <i class="fa fa-ban text-danger"></i>

将颜色改为红色。你可以自己设置任何颜色。

动态更改.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>

只需目标字体-很棒的预定义类名

例:

HTML

<i class="fa fa-facebook"></i> 

CSS

i.fa {
    color: red;
    font-size: 30px;
}