如何离线使用 Font Awesome？答案

【问题标题】：How to use Font Awesome offline?如何离线使用 Font Awesome？
【发布时间】：2020-05-08 11:22:11
【问题描述】：

Font Awesome 是提供免费/付费图标的服务，有时我们想在我们自己的项目中离线使用它来消除对网络资源的依赖。但如何？有时我们认为我们遵循了他们在文章中提到的所有步骤，但我们错过了一些东西。这也是我写这篇问答的原因。

【问题讨论】：

标签： font-awesome font-awesome-5

【解决方案1】：

如何离线使用 Font Awesome？在撰写此答案时，Font Awesome 的最新版本是 5.15.4

在 Hosting Font Awesome Yourself 上关注 Font Awesome documentation

从here下载Font Awesome的免费版本
解压下载的包
将整个 /webfonts 文件夹和 /css/all.css 复制到项目的静态资产目录中。
将复制的 /css/all.css 文件的引用（如下面的代码）添加到要使用 Font Awesome 的每个模板或页面的 <head> 元素中。

<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">

现在你可以开始在你的项目<i class="fas fa-user"></i>本地使用字体真棒图标了

【讨论】：

【解决方案2】：

先关注他们的文章：https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

/css/all.css 文件包含核心样式以及使用 Font Awesome 时需要的所有图标样式。 /webfonts 文件夹包含上述 CSS 引用和依赖的所有字体文件。

将整个 /webfonts 文件夹和 /css/all.css 复制到项目的静态资产目录（或您希望保留前端资产或供应商资料的任何位置）。

将复制的 /css/all.css 文件的引用添加到您要使用 Font Awesome 的每个模板或页面中。

然后再做这个。

@font-face{
  font-family:Font Awesome\ 5 Free;
  font-style:normal;
  font-weight:900;
  src:url('/assets/fontawesome-free-5.13.0-web/webfonts/fa-solid-900.eot');
  src:url('/assets/fontawesome-free-5.13.0-web/webfonts/fa-solid-900.eot?#iefix') format("embedded-opentype"),url('/assets/fontawesome-free-5.13.0-web/webfonts/fa-solid-900.woff2') format("woff2"),url('/assets/fontawesome-free-5.13.0-web/webfonts/fa-solid-900.woff') format("woff"),url('/assets/fontawesome-free-5.13.0-web/webfonts/fa-solid-900.ttf') format("truetype"),url('/assets/fontawesome-free-5.13.0-web/webfonts/fa-solid-900.svg#fontawesome') format("svg")
}

【讨论】：