如何deviseFont Awesome图标的图标颜色,大小和阴影

我怎样才能从Font Awesome的图标devise图标的颜色,大小和阴影?

例如,Font Awesome的网站会显示一些白色的图标,一些显示为红色,但不会显示如何以这种方式设置CSS

在这里输入图像说明

鉴于他们只是字体,那么你应该能够将它们设置为字体:

 #elementID { color: #fff; text-shadow: 1px 1px 1px #ccc; font-size: 1.5em; } 

你也可以直接添加样式:

 <i class="icon-ok-sign" style="color:green"></i> <i class="icon-warning-sign" style="color:red"></i> 

如果您同时使用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> 

看起来像FontAwesome图标颜色响应文本信息,文本错误等

 <div style="font-size: 44px;"> <i class="icon-umbrella icon-large text-error"></i> </div> 

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> 

http://fortawesome.github.io/Font-Awesome/examples/

 <i class="icon-thumbs-up icon-3x main-color"></i> 

在这里,我定义了一个全球化的风格,在我的CSS中,主色是一个类,在我的情况下是淡蓝色。 我发现,使用Font Awesome的图标上的内联样式效果很好,特别是在语义上为颜色命名的情况下,也就是说,如果需要单独的颜色,则使用导航颜色等。

在他们的网站上的这个例子中,以及我如何在我的例子中编写的,最新版本的Font Awesome已经改变了稍微resize的语法。以前它是:

 icon-xxlarge 

现在我必须使用:

 icon-3x 

当然,这一切都取决于你的环境安装了什么版本的Font Awesome。 希望这可以帮助。

使用FA 4.4.0添加

 .text-danger color: #d9534f 

到文件的CSS然后使用

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

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

在FontAwesome 4.0中,这些类更改为“fa-2x”,“fa-3x”。

请参阅http://www.w3schools.com/icons/fontawesome_icons_intro.asp链&#x63A5;

 <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> 

简单地说,你可以在你的css文件中定义一个类并将其级联到html文件中

 <i class="fa fa-plus fa-lg green"></i> 

现在写在CSS中

 .green{ color:green} 

当我试图直接从BootstrapCDN(最简单的方法)使用图标时,我遇到了同样的问题。 然后,我下载了CSS文件,并将其复制到我的网站的CSS文件夹中(在“真棒文档”中的“简单方法”下描述),并且所有事情都开始工作。

有一个非常简单的方法来改变字体真棒图标的颜色。

 <!-- 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> 

信用: 我可以更改字体真棒图标颜色的颜色吗?

(这个答案build立在答案上)

(对于书签图标,例如:)

inyour.css文件:

 .icon-bookmark.icon-white { color: white; } 

inyour.html文件:

 <div class="icon-bookmark icon-white"></div> 

把p标签换成p或span,然后你可以使用bootstrap css类

 <p class="text-success"><i class="fa fa-check"></i></p> 

dynamic更改.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> 
 text-shadow: 1px 1px 3px rgba(0,0,0,0.5); 

正如已经指出的那样,字体真棒图标是文本,因此您可以使用适当的CSS属性对其进行设置。 例如:

 .fa-twitter-square { font-size: 15px; color: red; } 

如果对我来说发生的事情相当多,图标大小根本不会改变,请将“!important”添加到font-size属性。

 .fa-twitter-square { font-size: 15px !important; color: red; }