CSS 如何设置 Font Awesome Icons 的图标颜色、大小和阴影样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12272372/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to style icon color, size, and shadow of Font Awesome Icons
提问by Elias7
How could I style the color, size and shadow of icons from Font Awesome's Icons?
我如何为Font Awesome 的 Icons 中的图标设置颜色、大小和阴影的样式？
For example, Font Awesome's sitewill show some icons in white and some in red but won't show the CSSfor how to style them that way ...
例如，Font Awesome 的网站将显示一些白色图标和一些红色图标，但不会显示CSS如何以这种方式设置它们的样式......
回答by David says reinstate Monica
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;
}
回答by dandrews
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>
回答by Qian Chen
If you are using Bootstrap at the same time, you can use:
如果您同时使用 Bootstrap，则可以使用：
<i class="fa fa-check-circle-o fa-5x text-success" ></i>
Otherwise:
除此以外：
<i class="fa fa-check-circle-o fa-5x" style="color:green"></i>
回答by user1695595
Looks like the FontAwesome icon color responds to text-info, text-error, etc.
看起来 FontAwesome 图标颜色响应文本信息、文本错误等。
<div style="font-size: 44px;">
<i class="icon-umbrella icon-large text-error"></i>
</div>
回答by gingin
inyour.css file:
在你的.css 文件中：
*.icon-white {color: white}
*.icon-silver {color: silver}
inyour.html file:
在你的.html 文件中：
<a><i class="icon-book icon-white"></i> Book</a>
<a><i class="icon-ok-sign icon-silver"></i> OK</a>
回答by Calum Childs
There is a really simple way to change the colour of Font Awesome icons.
有一种非常简单的方法可以更改 Font Awesome 图标的颜色。
<!-- 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>You can change the hex code to your preference.
NOTE: The text colour will change the icon colour as well unless there is a style="color:#00cc6a"within the itag.
您可以根据自己的喜好更改十六进制代码。注：文字颜色将改变图标的颜色，以及除非有一个style="color:#00cc6a"的内i标签。
回答by arif imtiaz
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"></i>
For Shadow : .fa-linkedin-square{text-shadow: 3px 6px #272634;}
回答by Steve Gutierrez
Using FA 4.4.0 adding
使用 FA 4.4.0 添加
.text-danger
color: #d9534f
to the document css and then using
到文档 css 然后使用
<i class="fa fa-ban text-danger"></i>
changes the color to red. You can set your own for any color.
将颜色更改为红色。您可以为任何颜色设置自己的颜色。
回答by kinghenry14
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. 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.
在这里，我在我的 CSS 中定义了一个全局样式，其中 main-color 是一个类，在我的例子中它是浅蓝色调。我发现在带有 Font Awesome 的图标上使用内联样式效果很好，尤其是在您按语义命名颜色的情况下，即 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. Hope this helps.
当然，这一切都取决于您在环境中安装了哪个版本的 Font Awesome。希望这可以帮助。
回答by angelokh
In FontAwesome 4.0, the classes change to 'fa-2x', 'fa-3x'.
在 FontAwesome 4.0 中，类更改为“fa-2x”、“fa-3x”。
