imgradeone's blog

短教程 - 在 HTML5 UP! 的模板里使用最新的 Font Awesome 图标库

2020-03-28 · 2 min read
教程

由于 HTML5 UP! 的模板目前统一配置的是 Font Awesome 5.9.0,而且 Font Awesome 的图标库一直在更新,因此可能导致部分图标的过时。更新一下 Font Awesome 可以让网站更好地展现各样的图标。

下载 Font Awesome 的 Webfont / CSS 文件

只需前往 这个教程链接,下载 Font Awesome for the Web(那么大一个按钮,我就不信你看不到)。

注意:从这里获取到的是 Free 版本,共含 1588(v5.13.0)个免费图标,带有 Solid 样式(和小部分 Regular 样式)的图标,以及品牌图标。如果你可以购买 Pro,则会有更多图标。
免费版只需同时遵守 Font Awesome Free License 即可,简而言之,就是不要将 Font Awesome 的名字用于命名项目。

将文件导入到网站里

打开 网站源文件夹/assets/

/webfonts

将下载的 .zip 文件中 /webfonts 的所有文件丢进网站的 ./assets/webfonts/ 文件夹。

/css

将下载的 .zip 文件中 /cssall.min.css 丢进网站的 ./assets/css/ 文件夹,删除原有的 fontawesome-all.min.css,并将新的 all.min.css 重命名为 fontawesome-all.min.css

打开网站测试一下

如果图标没变成方框,那么 Font Awesome 就更新成功了。

Powered by Gridea and made with ♥ by imgradeone
喜欢我的文章,也可以 赞助 一下哦qwq