关于 Butterfly 主题中 Icon 的使用

一、写在前面

我一度很困惑，我的网站的上的各种 icon 是怎么来的。例如导航栏，目前是这样配置的：

menu:
  首页: / || fas fa-home
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  相册: /gallery/ || fas fa-images
  关于: /about/ || fas fa-heart

其中类似 fas fa-home 应该就是图片的配置。但是这是啥啊，为啥这么写？直到我看了 Butterfly 主题的文档才开始理解。

二、fontawesome

文档是这么描述的：

Butterfly主题内置了 Font Awesome V5 图标，目前已更新到 5.13.0，总共有 1,588 个免费图标。

那么在 fas fa-home 中

fas 是 fontawesome 的缩写，表示使用 fontawesome 的图标；
fa-home 是图标的名称。

这个书写规则是 Butterfly 定义的，取决于 Butterfly 内部对 fontawesome 的引用逻辑。
而图标名称前面带 fa- 是 fontawesome 要求的。

也就是说，我们需要在 fontawesome 中搜索对应的图标，然后获取图标的名称，加上 fa- 前缀即可。
这里替换菜单栏的关于的图标举例，原先是

1	关于: /about/ \|\| fas fa-heart

找到要使用的图标，得到图标名为 fa-user

替换：

1	关于: /about/ \|\| fas fa-user

重新生成并部署

1	hexo cl && hexo s -g

可以看到生效了：

但是，是我想当然了。其实并不是所有的图标都是 fas fa-xxx 的格式，例如对于 bilibili 的图标来说，使用图标时应该用这个 fa-brands fa-bilibili。具体需要点击该图标进行查看：

Butterfly 主题使用 Font Awesome 版本是 6.5.1，而 Font Awesome 最新版本是 6.5.2。所以应该是 Butterfly文档没有及时更新？而 6.5.1 版本的图标个数应该也不止 1588 个。

三、iconfont

文档中还提到：

由于是国外的图标网站，对于国内的一些网站 Icon 并不支持。如有需要，你可以引入其它的图标服务商。
国内最出名的莫过于 iconfont ,功能很强大且图标内容很丰富的矢量图标库。很多 Font Awesome 不支持的图标都可以在这里找到。同时，iconfont 支持选择需要的图标生成css链接，减少不必要的CSS加载。

下面我就跟着 Butterfly 主题的文档来使用一下 iconfont。