如何设置Font Awesome Icons的图标颜色,大小和阴影的样式
Eli*_*as7 340 css icons styles twitter-bootstrap font-awesome-4
我如何设置Font Awesome 图标中图标的颜色,大小和阴影？
例如,Font Awesome的网站将显示一些白色的图标和一些红色的图标,但不会显示CSS如何以这种方式设置样式...
Dav*_*mas 453
鉴于它们只是字体,那么您应该能够将它们设置为字体:
#elementID {
color: #fff;
text-shadow: 1px 1px 1px #ccc;
font-size: 1.5em;
}
- 您可以使用http://css-tricks.com/examples/IconFont/中的示例对此进行测试 (4认同)
- @David Thomas:这是一个很好的解决方案.感谢您发布.然而,我仍然感到困惑,为什么font-awesome有时会显示白色的图标,有时会显示黑色.什么是诡计？正如GirlCanCode2指出的那样,FA网站上的例子显示了黑白图标和文字...然而,检查Firebug中的元素时,特定图标(例如,icon-info)的CSS被写为白色.这真的是我们要做的吗？bootstrap.css中没有icon-white选项？ (4认同)
dan*_*ews 146
您也可以只添加样式内联:
<i class="icon-ok-sign" style="color:green"></i>
<i class="icon-warning-sign" style="color:red"></i>
- 如果有人想通过评论来表示通常最佳做法是不使用内联样式,那么这是合适的.**当有人可以通过添加评论简单地改善答案的现有价值时,不应该对这些琐碎的事情进行有效且信息丰富的答案. (31认同)
- @NightOwl最佳做法是使用缩小,捆绑和缓存这些资源.这里的答案都没有说明任何这些事情,并且在孤立答案的背景下尝试并强制执行最佳实践是精英IMO.任何了解CSS的人都应该能够采用这种风格并将其移动到CSS类中. (16认同)
- 尽管有精英选票,但这个答案还算不错.因为字体很棒是一种字体,它会响应影响文本的样式和类. (6认同)
- @NightOwl就最佳实践而言,即使是最高投票的答案也是非常可怕的.您不应该在#id引用元素的共享CSS文件中创建样式,因为每个页面上只有一个元素可以订阅该样式.如果我因为这个原因而投票,我会不是很精英？两位回答者都有效地向提问者提供了有用的信息,而且当他们的答案确实有效时,我认为不应该对他们进行投票. (4认同)
- @AaronLS做得好,专注于重要的事情! (3认同)
Qia*_*hen 105
如果您同时使用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>
- 它可能不需要引导程序，但这就是我发现这个问题的方式。谢谢埃尔格斯！ (2认同)
use*_*595 42
看起来FontAwesome图标颜色响应text-info,text-error等.
<div style="font-size: 44px;">
<i class="icon-umbrella icon-large text-error"></i>
</div>
- 对于Bootstrap,<i class ="fa fa-warning text-danger"> </ i> (8认同)
gin*_*gin 17
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>
Cal*_*lds 11
有一种非常简单的方法可以改变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>您可以将十六进制代码更改为您的首选项.注意:文本颜色也会更改图标颜色,除非标签style="color:#00cc6a"内有颜色i.
小智 9
使用FA 4.4.0添加
.text-danger
color: #d9534f
到文档css然后使用
<i class="fa fa-ban text-danger"></i>
将颜色更改为红色.您可以为任何颜色设置自己的颜色.
http://fortawesome.github.io/Font-Awesome/examples/
<i class="icon-thumbs-up icon-3x main-color"></i>
在这里,我在CSS中定义了一个全局样式,其中main-color是一个类,在我的例子中它是浅蓝色调.我发现在带有Font Awesome的Icons上使用内联样式效果很好,尤其是在您在语义上命名颜色的情况下,例如,如果您想要单独的颜色,则使用nav-color等.
在他们网站上的这个例子中,以及我在我的例子中的编写方式,最新版本的Font Awesome已经稍微改变了调整大小的语法.之前它是:
icon-xxlarge
现在我必须使用:
icon-3x
当然,这完全取决于您在环境中安装的Font Awesome版本.希望这可以帮助.
您只需在css文件中定义一个类,然后将其级联为html文件即可
<i class="fa fa-plus fa-lg green"></i>
现在写下来的CSS
.green{ color:green}
小智 7
适用大小：fa-lg，fa-2x，fa-3x，fa-4x，fa-5x。
对于颜色：<i class="fa fa-link fa-lg" aria-
hidden="true"style="color:indianred"></i>
对于阴影：.fa-linkedin-square {文本阴影：3px 6px＃272634; }''
小智 5
当我尝试直接从 BootstrapCDN 使用图标时遇到了同样的问题（最简单的方法）。然后我下载了 CSS 文件并将它复制到我网站的 CSS 文件夹中的 CSS 文件（在字体真棒文档中的“简单方法”下描述），一切都开始正常工作。
请参阅链接 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>
只针对字体真棒的预定义类名
在前：
的HTML
<i class="fa fa-facebook"></i>
的CSS
i.fa {
color: red;
font-size: 30px;
}
| 归档时间： |
|
| 查看次数： |
822710 次 |
| 最近记录： |