blocks|key|485019|text|假设它们只是字体，那么您应该能够将它们设置为字体的样式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|485020|#elementID+{
++++color:+#fff;
++++text-shadow:+1px+1px+1px+#ccc;
++++font-size:+1.5em;
}|code-block|syntax|javascript|485021|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Given that they're simply fonts, then you should be able to style them as fonts:

<pre><code>#elementID {
 color: #fff;
 text-shadow: 1px 1px 1px #ccc;
 font-size: 1.5em;
}
</code></pre>

blocks|key|485083|text|您也可以只添加样式内联：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|485084|<i+class="icon-ok-sign"+style="color:green">

<i+class="icon-warning-sign"+style="color:red">|code-block|syntax|javascript|485085|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can also just add style inline:

<pre><code>&lt;i class="icon-ok-sign" style="color:green"&gt;&lt;/i&gt;

&lt;i class="icon-warning-sign" style="color:red"&gt;&lt;/i&gt;
</code></pre>

blocks|key|485345|text|如果您同时使用Bootstrap，则可以使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|485346|<i+class="fa+fa-check-circle-o+fa-5x+text-success"+>|code-block|syntax|javascript|485347|否则：|485348|<i+class="fa+fa-check-circle-o+fa-5x"+style="color:green">|485349|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

If you are using Bootstrap at the same time, you can use:

<pre><code>&lt;i class="fa fa-check-circle-o fa-5x text-success" &gt;&lt;/i&gt;
</code></pre>

Otherwise:

<pre><code>&lt;i class="fa fa-check-circle-o fa-5x" style="color:green"&gt;&lt;/i&gt;
</code></pre>

blocks|key|267867|text|看起来FontAwesome图标的颜色对文本信息、文本错误等做出了响应。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|267868|<div+style="font-size:+44px;">
+++<i+class="icon-umbrella+icon-large+text-error">
</div>|code-block|syntax|javascript|267869|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Looks like the FontAwesome icon color responds to text-info, text-error, etc.

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

blocks|key|485249|text|inyour.css文件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|485250|++++*.icon-white+{color:+white}
++++*.icon-silver+{color:+silver}|code-block|syntax|javascript|485251|inyour.html文件：|485252|++++<a><i+class="icon-book+icon-white">+Book</a>
++++<a><i+class="icon-ok-sign+icon-silver">+OK</a>|485253|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

inyour.css file:

<pre><code> *.icon-white {color: white}
 *.icon-silver {color: silver}
</code></pre>

inyour.html file:

<pre><code> &lt;a&gt;&lt;i class="icon-book icon-white"&gt;&lt;/i&gt; Book&lt;/a&gt;
 &lt;a&gt;&lt;i class="icon-ok-sign icon-silver"&gt;&lt;/i&gt; OK&lt;/a&gt;
</code></pre>

blocks|key|486046|text|For+Size+:+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">

For+Shadow+:+.fa-linkedin-square{text-shadow:+3px+6px+#272634;}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|486047|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>For Size : fa-lg, fa-2x, fa-3x, fa-4x, fa-5x.

For Color : &lt;i class="fa fa-link fa-lg" aria-hidden="true"style="color:indianred"&gt;&lt;/i&gt;

For Shadow : .fa-linkedin-square{text-shadow: 3px 6px #272634;}
</code></pre>

blocks|key|485586|text|有一种非常简单的方法可以改变字体图标的颜色。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|485587|​|485588|
<script+src="https://use.fontawesome.com/49b98aaeb5.js"></script>

<i+class="fa+fa-thumbs-up+fa-5x"+aria-hidden="true"+style="color:#00cc6a">
<i+class="fa+fa-thumbs-up+fa-4x"+aria-hidden="true"+style="color:#00cc6a">
<i+class="fa+fa-thumbs-up+fa-3x"+aria-hidden="true"+style="color:#00cc6a">
<i+class="fa+fa-thumbs-up+fa-2x"+aria-hidden="true"+style="color:#00cc6a">
<i+class="fa+fa-thumbs-up"+aria-hidden="true"+style="color:#00cc6a">|code-block|syntax|javascript|485589|485590|您可以根据自己的喜好更改十六进制代码。注意:文本颜色也会改变图标的颜色，除非i标签中有style="color:#00cc6a"。|offset|length|style|CODE|485591|entityMap^0|0|0|0|0|12|1|17|L|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|V|8|@$L|W|M|X|N|O]|$L|Y|M|Z|N|O]]|9|@]|A|$]]|$1|P|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|Q|$]]

There is a really simple way to change the colour of Font Awesome icons. 

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Font Awesome insert code --&gt;
&lt;script src="https://use.fontawesome.com/49b98aaeb5.js"&gt;&lt;/script&gt;
&lt;!-- End --&gt;
&lt;i class="fa fa-thumbs-up fa-5x" aria-hidden="true" style="color:#00cc6a"&gt;&lt;/i&gt;
&lt;i class="fa fa-thumbs-up fa-4x" aria-hidden="true" style="color:#00cc6a"&gt;&lt;/i&gt;
&lt;i class="fa fa-thumbs-up fa-3x" aria-hidden="true" style="color:#00cc6a"&gt;&lt;/i&gt;
&lt;i class="fa fa-thumbs-up fa-2x" aria-hidden="true" style="color:#00cc6a"&gt;&lt;/i&gt;
&lt;i class="fa fa-thumbs-up" aria-hidden="true" style="color:#00cc6a"&gt;&lt;/i&gt;</code></pre>
</div>
</div>


You can change the hex code to your preference. 
NOTE: The text colour will change the icon colour as well unless there is a <code>style="color:#00cc6a"</code> within the <code>i</code> tag.

blocks|key|268330|text|使用FA+4.4.0添加|type|unstyled|depth|inlineStyleRanges|entityRanges|data|268331|.text-danger
++++color:+#d9534f|code-block|syntax|javascript|268332|添加到文档css，然后使用|268333|+<i+class="fa+fa-ban+text-danger">|268334|将颜色更改为红色。您可以为任何颜色设置自己的颜色。|268335|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Using FA 4.4.0 adding

<pre><code>.text-danger
 color: #d9534f
</code></pre>

to the document css and then using 

<pre><code> &lt;i class="fa fa-ban text-danger"&gt;&lt;/i&gt;
</code></pre>

changes the color to red. You can set your own for any color.

blocks|key|485154|text|http://fortawesome.github.io/Font-Awesome/examples/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|485155|<i+class="icon-thumbs-up+icon-3x+main-color">|code-block|syntax|javascript|485156|在这里，我在我的CSS中定义了一个全局样式，其中main-color是一个类，在我的例子中它是一个浅蓝色色调。我发现在带有字体的图标上使用内联样式效果很好，特别是当你从语义上命名颜色时，例如，如果你想要一个单独的颜色，那就是nav-color。|485157|在他们的网站上的这个例子中，以及我是如何在我的例子中写的，最新版本的字体令人敬畏的字体略微改变了语法，调整了过去的size.Before：|485158|icon-xxlarge|485159|现在我必须使用：|485160|icon-3x|485161|当然，这完全取决于您的环境中安装了什么版本的Font+Awesome。希望这能有所帮助。|485162|entityMap|0|LINK|mutability|MUTABLE|url^0|0|1F|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]]|C|$]]|$1|D|3|E|5|F|7|15|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|16|8|@]|9|@]|C|$]]|$1|K|3|L|5|6|7|17|8|@]|9|@]|C|$]]|$1|M|3|N|5|F|7|18|8|@]|9|@]|C|$G|H]]|$1|O|3|P|5|6|7|19|8|@]|9|@]|C|$]]|$1|Q|3|R|5|F|7|1A|8|@]|9|@]|C|$G|H]]|$1|S|3|T|5|6|7|1B|8|@]|9|@]|C|$]]|$1|U|3|-4|5|6|7|1C|8|@]|9|@]|C|$]]]|V|$W|$5|X|Y|Z|C|$10|4]]]]

<a href="http://fortawesome.github.io/Font-Awesome/examples/">http://fortawesome.github.io/Font-Awesome/examples/</a>

<pre><code>&lt;i class="icon-thumbs-up icon-3x main-color"&gt;&lt;/i&gt;
</code></pre>

Here I have defined a global style in my CSS where main-color is a class, in my case it is a light blue hue. I find that using inline styles on Icons with Font Awesome works well, esp in the case when you name your colors semantically, i.e. nav-color if you want a separate color for that, etc.

In this example on their website, and how I have written in my example as well, the newest version of Font Awesome has changed the syntax slightly of adjusting the size.Before it used to be:

<pre><code>icon-xxlarge
</code></pre>

where now I have to use:

<pre><code>icon-3x
</code></pre>

Of course, this all depends on what version of Font Awesome you have installed on your environment. Hope this helps.

blocks|key|268255|text|在FontAwesome+4.0中，类更改为'fa-2x'，'fa-3x‘。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|268256|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

In FontAwesome 4.0, the classes change to 'fa-2x', 'fa-3x'.

blocks|key|485486|text|简单地说，您可以在css文件中定义一个类，并将其级联到html文件中，如下所示|type|unstyled|depth|inlineStyleRanges|entityRanges|data|485487|<i+class="fa+fa-plus+fa-lg+green">+|code-block|syntax|javascript|485488|现在用css写下来|485489|.green{+color:green}|485490|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Simply you can define a class in your css file and cascade it into html file like 

<pre><code>&lt;i class="fa fa-plus fa-lg green"&gt;&lt;/i&gt; 
</code></pre>

now write down in css 

<pre><code>.green{ color:green}
</code></pre>

blocks|key|486027|text|只需要目标字体-很棒的预定义类名|type|unstyled|depth|inlineStyleRanges|entityRanges|data|486028|在ex中：|486029|HTML|486030|<i+class="fa+fa-facebook">+|code-block|syntax|javascript|486031|CSS|486032|i.fa+{
++++color:+red;
++++font-size:+30px;
}|486033|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Just target font-awesome predefined class name 

in ex:

HTML

<pre><code>&lt;i class="fa fa-facebook"&gt;&lt;/i&gt; 
</code></pre>

CSS

<pre><code>i.fa {
 color: red;
 font-size: 30px;
}
</code></pre>

blocks|key|485454|text|请参阅链接http://www.w3schools.com/icons/fontawesome_icons_intro.asp|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|485455|<i+class="fa+fa-car">
<i+class="fa+fa-car"+style="font-size:48px;">
<i+class="fa+fa-car"+style="font-size:60px;color:red;">

<i+class="fa+fa-car+fa-lg">
<i+class="fa+fa-car+fa-2x">
<i+class="fa+fa-car+fa-3x">
<i+class="fa+fa-car+fa-4x">
<i+class="fa+fa-car+fa-5x">|code-block|syntax|javascript|485456|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/icons/fontawesome_icons_intro.asp^0|5|1M|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Please refer to the link
<a href="http://www.w3schools.com/icons/fontawesome_icons_intro.asp" rel="noreferrer">http://www.w3schools.com/icons/fontawesome_icons_intro.asp</a>

<pre><code>&lt;i class="fa fa-car"&gt;&lt;/i&gt;
&lt;i class="fa fa-car" style="font-size:48px;"&gt;&lt;/i&gt;
&lt;i class="fa fa-car" style="font-size:60px;color:red;"&gt;&lt;/i&gt;

&lt;i class="fa fa-car fa-lg"&gt;&lt;/i&gt;
&lt;i class="fa fa-car fa-2x"&gt;&lt;/i&gt;
&lt;i class="fa fa-car fa-3x"&gt;&lt;/i&gt;
&lt;i class="fa fa-car fa-4x"&gt;&lt;/i&gt;
&lt;i class="fa fa-car fa-5x"&gt;&lt;/i&gt;
</code></pre>

blocks|key|485227|text|当我尝试直接从BootstrapCDN+(最简单的方式)使用图标时，我也遇到了同样的问题。然后我下载了CSS文件并将其复制到我站点的CSS文件夹CSS文件(在font+started文档中的“简单方法”中描述)，一切都开始正常工作了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|485228|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I had the same problem when I tried to use the icons directly from BootstrapCDN (the easiest way). Then I downloaded the CSS file and copied it to my site's CSS folder the CSS file (Described under the 'easy way' in font awesome documentation), and everything started working as they should.

blocks|key|268362|text|将i标记包装在p或span中，然后就可以使用bootstrap+css类|type|unstyled|depth|inlineStyleRanges|entityRanges|data|268363|<p+class="text-success"><i+class="fa+fa-check">|code-block|syntax|javascript|268364|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Wrap the i tag in p or span, then you can use bootstrap css class

<pre><code>&lt;p class="text-success"&gt;&lt;i class="fa fa-check"&gt;&lt;/i&gt;&lt;/p&gt;
</code></pre>

blocks|key|485672|text|正如已经指出的，字体很棒的图标是文本，因此您可以使用适当的CSS属性来设置样式。例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|485673|.fa-twitter-square+{
++++font-size:+15px;
++++color:+red;
}|code-block|syntax|javascript|485674|如果，就像我经常遇到的那样，图标的大小根本没有变化，那就在font-size属性中添加"!important“。|485675|.fa-twitter-square+{
++++font-size:+15px+!important;
++++color:+red;
}|485676|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

As it has been pointed out, font awesome icons are text, consequently you style it using the appropriate CSS attributes. For example:

<pre><code>.fa-twitter-square {
 font-size: 15px;
 color: red;
}
</code></pre>

If, as it happens quite a bit to me, the icon size doesn't change at all, add "!important" to the font-size attribute.

<pre><code>.fa-twitter-square {
 font-size: 15px !important;
 color: red;
}
</code></pre>

blocks|key|268786|text|用于调整图标大小|type|unstyled|depth|inlineStyleRanges|entityRanges|data|268787|我们的Web+Fonts+%2B+CSS和SVG+%2B+JS框架都包含一些在页面UI上下文中调整图标大小的基本控件。|268788|您可以使用like|268789|<i+class="fas+fa-camera+fa-xs">
<i+class="fas+fa-camera+fa-sm">
<i+class="fas+fa-camera+fa-lg">
<i+class="fas+fa-camera+fa-2x">
<i+class="fas+fa-camera+fa-3x">
<i+class="fas+fa-camera+fa-5x">
<i+class="fas+fa-camera+fa-7x">
<i+class="fas+fa-camera+fa-10x">|code-block|syntax|javascript|268790|https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons|offset|length|268791|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|1U|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|Y|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|Z|8|@]|9|@$M|10|N|11|1|12]]|A|$]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|L]]]]

For Sizing Icons

Both our Web Fonts + CSS and SVG + JS frameworks include some basic controls for sizing icons in the context of your page’s UI.

you can use like

<pre><code>&lt;i class="fas fa-camera fa-xs"&gt;&lt;/i&gt;
&lt;i class="fas fa-camera fa-sm"&gt;&lt;/i&gt;
&lt;i class="fas fa-camera fa-lg"&gt;&lt;/i&gt;
&lt;i class="fas fa-camera fa-2x"&gt;&lt;/i&gt;
&lt;i class="fas fa-camera fa-3x"&gt;&lt;/i&gt;
&lt;i class="fas fa-camera fa-5x"&gt;&lt;/i&gt;
&lt;i class="fas fa-camera fa-7x"&gt;&lt;/i&gt;
&lt;i class="fas fa-camera fa-10x"&gt;&lt;/i&gt;
</code></pre>

<a href="https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons" rel="nofollow noreferrer">https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons</a>

blocks|key|268382|text|动态更改.fa-xxx图标的css属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|268383|<li+class="nws">
<a+href="#NewsModal"+class="urgent"+title="'+%2B+title+%2B+'"+onclick=""><span+class="label+label-icon+label-danger"><i+class="fa+fa-bolt">'+
</a>
</li>
<script>
++$(document).ready(function(){
+++$('li.nws').on("focusin",+function(){
++++$('.fa-bolt').addClass('lightning');
+++});
+});
</script>

<style>
.lightning{+/*do+something+cool+like+shutter*/}
</style>|code-block|syntax|javascript|268384|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Dynamically change the css properties of .fa-xxx icons:

<pre><code>&lt;li class="nws"&gt;
&lt;a href="#NewsModal" class="urgent" title="' + title + '" onclick=""&gt;&lt;span class="label label-icon label-danger"&gt;&lt;i class="fa fa-bolt"&gt;&lt;/i&gt;&lt;/span&gt;' 
&lt;/a&gt;
&lt;/li&gt;
&lt;script&gt;
 $(document).ready(function(){
 $('li.nws').on("focusin", function(){
 $('.fa-bolt').addClass('lightning');
 });
 });
&lt;/script&gt;

&lt;style&gt;
.lightning{ /*do something cool like shutter*/}
&lt;/style&gt;
</code></pre>

blocks|key|485516|text|text-shadow:+1px+1px+3px+rgba(0,0,0,0.5);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|485517|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
</code></pre>

blocks|key|268812|text|尝试简单地使用诸如fa-lg、fa-2x、fa-3x、fa-4x、fa-5x之类的命令来增加图标相对于其容器的大小|type|unstyled|depth|inlineStyleRanges|entityRanges|data|268813|例如：-|268814|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

Try to simply use something like fa-lg,fa-2x,fa-3x,fa-4x,fa-5x to increase the icon size relative to their container
for eg:-

blocks|key|268707|text|我不建议你使用像fa-5x这样的内置字体样式，因为担心他们会改变它，你不得不不断地链接你的应用程序代码来满足最新的标准。你可以通过给每个你想要统一设置样式的字体类相同的类来避免这种情况，比如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|268708|<i+class="fa+fa-facebook-square+fa-sabi-social-icons"+aria-hidden="true">
<i+class="fa+fa-twitter-square+fa-sabi-social-icons"+aria-hidden="true">
<i+class="fa+fa-google-plus-square+fa-sabi-social-icons"+aria-hidden="true">|code-block|syntax|javascript|268709|这里的类是fa-sabi-social-icons|268710|然后，在css中，您可以使用与设置普通字体样式相同的css规则来设置字体样式。e.g|268711|.fa-sabi-social-icons+{
+++++color:+//your+color;
+++++font-size:+//+your+font-size+in+px,+em+or+%25;
+++++text-shadow:+2px+2px+#FF0000;
}|268712|这应该会让你的字体变得很棒。|268713|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

I would not advice you to use built in font-awesome styling like the fa-5x etc; for fear they may change it and you would have to keep chainging your application code to meet up with the latest standard. You simply avoid this by giving each font-awesome class you want to style uniformly the same class say:

<pre><code>&lt;i class="fa fa-facebook-square fa-sabi-social-icons" aria-hidden="true"&gt;&lt;/i&gt;
&lt;i class="fa fa-twitter-square fa-sabi-social-icons" aria-hidden="true"&gt;&lt;/i&gt;
&lt;i class="fa fa-google-plus-square fa-sabi-social-icons" aria-hidden="true"&gt;&lt;/i&gt;
</code></pre>

Here the class is fa-sabi-social-icons

Then in your css you can the style the fonts using the same css rules you would style a normal font with.
e.g

<pre><code>.fa-sabi-social-icons {
 color: //your color;
 font-size: // your font-size in px, em or %;
 text-shadow: 2px 2px #FF0000;
}
</code></pre>

That should get your font-awesome fonts styled

blocks|key|486120|text|下面是一个如何设置字体样式的示例--太棒了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|486121|​|486122|.arrow+i.fa+{
++color:+white+!important;
++font-size:+2.2rem;
++opacity:+.3;
}|code-block|syntax|javascript|486123|<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">
</div>|486124|486125|就这样。|486126|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

Here is an example how to styling font-awesome:
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.arrow i.fa {
 color: white !important;
 font-size: 2.2rem;
 opacity: .3;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;

&lt;div class="arrow d-none d-md-block"&gt;
 &lt;i class="fa fa-angle-down"&gt;&lt;/i&gt;
&lt;/div&gt;</code></pre>
</div>
</div>

That's it.

How could I style the color, size and shadow of icons from <a href="http://fortawesome.github.com/Font-Awesome/#overview" rel="noreferrer">Font Awesome's Icons</a>?

For example, <a href="http://fortawesome.github.com/Font-Awesome/#overview" rel="noreferrer">Font Awesome's site</a> will show some icons in white and some in red but won't show the <code>CSS</code> for how to style them that way ...

<img src="https://i.stack.imgur.com/kHzqT.png" alt="Buttons and links of different colours, with both red, white and black icons next to them">

How to style icon color, size, and shadow of Font Awesome Icons

容器

如何从设置图标的颜色、大小和阴影的样式例如，会以白色和红色显示一些图标，但不会向CSS显示如何以这种方式设置样式……​​

问如何设计字体图标的颜色、大小和阴影
EN

回答 22

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何设计字体图标的颜色、大小和阴影EN

回答 22

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何设计字体图标的颜色、大小和阴影
EN