我如何设置Font Awesome图标中图标的颜色，大小和阴影？
例如，Font Awesome的网站将显示一些白色的图标和一些红色的图标但不会显示CSS如何以这种方式设置样式...
鉴于它们只是字体，那么您应该能够将它们设置为字体：
#elementID {
color: #fff;
text-shadow: 1px 1px 1px #ccc;
font-size: 1.5em;
}
您可以使用css-/examples/IconFont中的示例对此进行测试
@David Thomas：这是一个很好的解决方案。感谢您发布。然而，我仍然感到困惑，为什么font-awesome有时会显示白色的图标，有时会显示黑色。什么是诡计？正如GirlCanCode2指出的那样，FA网站上的例子显示了黑白图标和文字。 。 。然而，检查Firebug中的元素，特定图标(例如，icon-info)的CSS被写为白色。这真的是我们要做的吗？ bootstrap.css中没有icon-white选项？
要改变颜色，请在SO中查看，希望对某人有所帮助
您也可以只添加样式内联：
尽管有精英选票，但这个答案还算不错。因为字体很棒是一种字体，它会响应影响文本的样式和类。
@NightOwl它也是使用缩小，捆绑和缓存这些资源的最佳实践。这里的答案都没有说明任何这些事情，并且在孤立答案的背景下尝试并强制执行最佳实践是精英IMO。任何了解CSS的人都应该能够采用这种风格并将其移动到CSS类中。
@NightOwl就最佳实践而言，即使是最高投票的答案也是非常可怕的。您不应该在共享CSS文件中创建样式，这些文件通过#id引用元素，因为每个页面上只有一个元素可以订阅该样式。如果我因为这个原因而投票，我会不是很精英？两位回答者都有效地向提问者提供了有用的信息，我认为当他们的答案确实有效时，他们应该被低估。
如果有人想通过评论来补充答案，这些评论表明通常不使用内联样式是最佳做法，那么这是合适的。当有人可以通过添加评论简单地改善答案的现有价值时，不应该对这些无关紧要的答案进行有效且信息丰富的答案。
@AaronLS做得好，专注于重要的事情！
对我来说，将简单的颜色css指令放入其自己的类并将其与您的css资产捆绑在一起是没有意义的。你会怎么做？ class=icon-ok-sign my-red-class？还是class=icon-ok-sign-red？这使得它的可读性降低，增加了无用的复杂程度。
使用标记图标也不是最好的做法。为什么挑剔呢？
#id可以被内联样式更容易被其他样式覆盖，而不需要"！important" - 所以它仍然不那么糟糕。 - 另一方面，我认为没有理由不这样做.class-name ---提交了最受好评的问题的编辑。 ---使用i作为图标很好，因为我不像em没有语义含义。所以相当苹果到橘子imho。
如果您同时使用Bootstrap，则可以使用：
除此以外：
添加text-success有效
当然，问题的解决方案不涉及使用bootstrap
它可能不需要bootstrap，但这就是我如何找到这个问题。谢谢Elgs！
您可以从屏幕截图中看到他们已经在使用bootstrap。继续使用它来维护相同的调色板而不是重复代码是有意义的。
微妙但重要的是：文本成功是文本颜色，而不是btn成功的按钮面的颜色。因此，如果您希望图标看起来像"平面按钮"，那么文本成功会略有不同。我发现这在文本警告中最明显，因为它是一个丑陋的黄色而不是一个非常明显的橙色
看起来FontAwesome图标颜色响应text-info，text-error等。
对于Bootstrap，
这可能是这个页面上最好的答案，至少对我而言，因为我已经使用了Bootstrap，这符合这个范例。
除非你有bootstrap，否则text-error不起作用
inyour.css文件：
*.icon-white {color: white}
*.icon-silver {color: silver}
inyour.html文件：
Book
OK
有一种非常简单的方法可以改变Font Awesome图标的颜色。
您可以将十六进制代码更改为您的首选项。
注意：除非i标记内有style="color:#00cc6a"，否则文本颜色也会更改图标颜色。
使用FA 4.4.0添加
.text-danger
color: #d9534f
到文档css然后使用
将颜色更改为红色。您可以为任何颜色设置自己的颜色。
http://fortawesome.github.io/Font-Awesome/examples/
在这里，我在CSS中定义了一个全局样式，其中main-color是一个类，在我的例子中它是浅蓝色调。我发现在带有字体Awesome的图标上使用内联样式效果很好，尤其是在您在语义上命名颜色的情况下，例如，如果您想要单独的颜色，则使用nav-color等。
在他们网站上的这个例子中，以及我在我的例子中的编写方式，最新版本的Font Awesome已经稍微改变了调整大小的语法。之前它是：
icon-xxlarge
现在我必须使用：
icon-3x
当然，这完全取决于您在环境中安装的Font Awesome版本。希望这可以帮助。
尺寸：fa-lg，fa-2x，fa-3x，fa-4x，fa-5x。
对于颜色：
对于暗影：.fa-linkedin-square {
text-shadow：3px 6px＃272634;
}``
您只需在css文件中定义一个类，然后将其级联为html文件即可
现在写下来的CSS
.green{ color:green}
在FontAwesome 4.0中，类更改为"fa-2x"，"fa-3x"。
请参阅链接
/icons/fontawesome_icons_intro.asp
只需定位font-awesome预定义的类名
在前：
HTML
CSS
i.fa {
color: red;
font-size: 30px;
}
当我尝试直接使用BootstrapCDN(最简单的方法)中的图标时，我遇到了同样的问题。然后我下载了CSS文件并将其复制到我网站的CSS文件夹中的CSS文件(在字体真棒文档中的"简单方法"中描述)，一切都开始正常工作。
Credit：我可以更改Font Awesomes图标颜色的颜色吗？
(这个答案建立在答案的基础上)
(对于书签图标，例如:)
inyour.css文件：
.icon-bookmark.icon-white {
color: white;
}
inyour.html文件：
将p标签包裹在p或span中，然后可以使用bootstrap css类
对于Font Awesome 5 SVG版本，请使用
filter: drop-shadow(0 0 3px rgba(0,0,0,0.7));
正如已经指出的那样，字体真棒图标是文本，因此您可以使用适当的CSS属性对其进行样式设置。例如：
.fa-twitter-square {
font-size: 15px;
color: red;
}
如果，对我来说发生了很多，图标大小根本没有变化，请在font-size属性中添加"！important"。
.fa-twitter-square {
font-size: 15px !important;
color: red;
}
用于调整图标大小
我们的Web Fonts + CSS和SVG + JS框架都包含一些基本控件，用于在页面UI的上下文中调整图标大小。
你可以使用喜欢
/how-to-use/on-the-web/styling/sizing-icons
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
我不建议你使用像fa-5x等内置的字体 - 真棒样式;因为担心他们可能会改变它，你必须继续使用应用程序代码来满足最新标准。你只需要给每个字体很棒的类，你想要统一样式，同一个类说：
这里的课程是fa-sabi-social-icons
然后在你的CSS中你可以使用相同的css规则来设置字体的样式，你可以使用普通字体设置样式。
例如
.fa-sabi-social-icons {
color: //your color;
font-size: // your font-size in px, em or %;
text-shadow: 2px 2px #FF0000;
}
这应该得到你的字体真棒字体风格
动态更改.fa-xxx图标的css属性：
'
$(document).ready(function(){
$('li.nws').on("focusin", function(){
$('.fa-bolt').addClass('lightning');
});
});
.lightning{ /*do something cool like shutter*/}
