
Web字体:Font Awesome使用方法
Font Awesome字体提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。该字体支持无限放大缩小,无论在任何尺寸下,可缩放的矢量图形都会为您呈现出完美的图标。
获取Font Awesome字体
此文章以5.8.2版本介绍,4.7.0版本地址:https://fontawesome.com/v4.7.0/
官网下载:您可以到Font Awesome官网来下载免费的字体包。
github:点此下载
下载方法:点击右上角的Clone or download
下载好后的字体包共包括以下文件:
引入样式表
引入所有样式:<link rel="stylesheet" href="static/css/all.min.css" />
如果字体文件缺失可能是字体文件的路径不对,可以打开样式表的末尾处修改路径,默认的字体文件路径是/webfonts/
;如果是IIS服务器则需要添加正确的MIME类型。MIME类型请参考:添加MIME类型
使用方法
Font Awesome字体需要用<i>
标签或者<em>
和<span>
包裹住,其class类名前缀为fas、far、fal、fab。请注意,5.0版本以后fa前缀不支持使用,默认值为fas和fab。
样式示例:
样式 | 使用权限 | 样式前缀 | 示例 | 渲染 |
---|---|---|---|---|
Solid | Free | fas |
<i class="fas fa-camera"></i> |
|
Regular | Pro Required | far |
<i class="far fa-camera"></i> |
|
Light | Pro Required | fal |
<i class="fal fa-camera"></i> |
|
Brands | Free | fab |
<i class="fab fa-font-awesome"></i> |
如果想查找图标可以到这里查找:https://fontawesome.com/icons?d=gallery
为字体设置颜色
Font Awesome图标自动继承CSS大小和颜色。这意味着无论您将它们放在哪里,它们都会继承父元素的文本样式等。
颜色示例:
<span style="font-size: 3em; color: Tomato;">
<i class="fas fa-camera"></i>
</span>
<span style="font-size: 48px; color: Dodgerblue;">
<i class="fas fa-camera"></i>
</span>
<span style="font-size: 3rem;">
<span style="color: Mediumslateblue;">
<i class="fas fa-camera"></i>
</span>
</span>