如何设置Font Awesome Icons的图标颜色，大小和阴影的样式

本文翻译自：How to style icon color, size, and shadow of Font Awesome Icons

How could I style the color, size and shadow of icons from Font Awesome's Icons ? 我如何设置Font Awesome 图标中图标的颜色，大小和阴影？

For example, Font Awesome's site will show some icons in white and some in red but won't show the CSS for how to style them that way ... 例如，Font Awesome的网站将显示一些白色的图标和一些红色的图标，但不会显示如何以这种方式设置样式的CSS ...

---

#1楼

参考：https://stackoom.com/question/pUbU/如何设置Font-Awesome-Icons的图标颜色-大小和阴影的样式

---

#2楼

Given that they're simply fonts, then you should be able to style them as fonts: 鉴于它们只是字体，那么您应该能够将它们设置为字体：

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

---

#3楼

Looks like the FontAwesome icon color responds to text-info, text-error, etc. 看起来FontAwesome图标颜色响应text-info，text-error等。

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

---

#4楼

You can also just add style inline: 您也可以只添加样式内联：

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

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

---

#5楼

Credit: Can I change the color of Font Awesome's icon color? Credit： 我可以更改Font Awesome图标颜色的颜色吗？

(this answer builds on that answer) （这个答案建立在答案的基础上）

(for the bookmark icon, for example:) （对于书签图标，例如:)

inyour.css file: inyour.css文件：

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

inyour.html file: inyour.html文件：

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

---

#6楼

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

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

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. 在这里，我在CSS中定义了一个全局样式，其中main-color是一个类，在我的例子中它是浅蓝色调。 I find that using inline styles on Icons with Font Awesome works well, esp in the case when you name your colors semantically, ie nav-color if you want a separate color for that, etc. 我发现在带有Font Awesome的Icons上使用内联样式效果很好，尤其是在您在语义上命名颜色的情况下，例如，如果您想要单独的颜色，则使用nav-color等。

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: 在他们网站上的这个例子中，以及我在我的例子中的编写方式，最新版本的Font Awesome已经稍微改变了调整大小的语法。之前它是：

icon-xxlarge

where now I have to use: 现在我必须使用：

icon-3x

Of course, this all depends on what version of Font Awesome you have installed on your environment. 当然，这完全取决于您在环境中安装的Font Awesome版本。 Hope this helps. 希望这可以帮助。