如何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链接;
<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="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; }
