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>