前言

用过Butterfly主题的家人们应该对font awesome icons不陌生，Butterfly原生的Menu界面等多处都使用了诸如fas fa-home这样的语法。查看font awesome的网站，可以搜索各种图标，并且获取快捷的插入图表体验。

font awesome icons这个图标库是Butterfly原生支持的，但是如果有些图标在此库中找不到，而在别的某些地方（比如iconfont阿里巴巴矢量图标库）能找到，能否有一致的使用体验呢？

本篇博客就以本人使用iconfont的经历为例，讲讲如何在Hexo+Butterfly中插入图标。

从iconfont拉图标

首先从iconfont网站上搜索到你想要的图标，加入购物车（不得不说这个表述真的很国内），然后打开购物车点击下载代码，会下载一个安装包，安装包里不仅有我们需要的css和ttf等文件，还有一个示例用的html文件，教我们如何使用。这里我们主要需要iconfont.css和iconfont.ttf这两个文件。将这两个文件分别放入/source/css和/source/fonts中，这样在hexo generate的时候就会分别复制到/public/css和/public/fonts中了。

前端代码配置

首先我们需要引用这个新的css文件。打开Butterfly主题的_config.yml文件，找到inject板块，在head下添加我们刚刚的iconfont.css文件。 

1
2
3
4
5
6
7
8
9
10
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
inject:
  head: 
    - <meta name="baidu-site-verification" content="<敏感信息隐藏>" />
    - <link rel="stylesheet" href=" /css/fonts.css">
    - <link rel="stylesheet" href=" /css/iconfont.css"
    # - <link rel="stylesheet" href="/xxx.css">
  bottom:
    # - <script src="xxxx"></script>

接下来还要修改iconfont.css文件中引用iconfont.ttf文件的路径，因为原来的示例是全部裸露在同一个文件夹下的，但是现在我们显然需要一些更深层的路径。打开iconfont.css文件，原来是

1
2
3
4
5
@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('iconfont.ttf?t=1766026193053') format('truetype');
}
/* ... */

修改为

1
2
3
4
5
@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('/fonts/iconfont.ttf?t=1766026193053') format('truetype');
}
/* ... */

最后一步，在你想要插入图标的地方插入即可。比如在_config.yml的/aside/card_author/button/icon中，我写了iconfont icon-QQ以插入QQ图标。如果你想在文本中插入，可以使用<span>标签，比如

1
<span class="iconfont icon-QQ"></span>

效果为:。你甚至可以像调控普通文字一样调控字体颜色等等，因为它真的就是ttf文件中的一个字体。

1
<font color="pink"><span class="iconfont icon-QQ"></span> </font>