Font Awesome字体提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。该字体支持无限放大缩小,无论在任何尺寸下,可缩放的矢量图形都会为您呈现出完美的图标。

获取Font Awesome字体

此文章以5.8.2版本介绍,4.7.0版本地址:https://fontawesome.com/v4.7.0/

官网下载:您可以到Font Awesome官网来下载免费的字体包。

github:点此下载

下载方法:点击右上角的Clone or download

从github下载font awesome字体包

下载好后的字体包共包括以下文件:

下载好后的字体包

引入样式表

引入所有样式:<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>