我如何从FontAwesome的图标样式的颜色,大小和阴影?
例如,FontAwesome的网站将显示一些白色图标和一些红色图标,但不会显示如何样式它们的CSS……
我如何从FontAwesome的图标样式的颜色,大小和阴影?
例如,FontAwesome的网站将显示一些白色图标和一些红色图标,但不会显示如何样式它们的CSS……
当前回答
当我试图直接从BootstrapCDN(最简单的方法)使用图标时,我也遇到了同样的问题。然后我下载了CSS文件,并将其复制到我网站的CSS文件夹CSS文件(在“简单方法”字体awesome文档中描述),一切都开始正常工作。
其他回答
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
调整图标大小
我们的Web Fonts + CSS和SVG + JS框架都包括一些基本的控件,用于在页面的UI上下文中调整图标的大小。
你可以用like
<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>
https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons
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>
只需目标字体-很棒的预定义类名
例:
HTML
<i class="fa fa-facebook"></i>
CSS
i.fa {
color: red;
font-size: 30px;
}
在FontAwesome 4.0中,类更改为'fa-2x', 'fa-3x'。