在 Hexo 中使用 iconfont 图标

系统管理员 2023-01-08 02:15 339阅读 0赞

> [iconfont首页][iconfont]

## iconfont 获取 ##

*  可以先在首页搜索你想要的图标，然后添加到购物车中，然后把购物车中的图标添加到项目中，如果没有项目的话可以新建一个项目。
 *  生成在线链接
    
     *  点击 font class 按钮直接就可以生成链接了
     *  复制生成的链接地址，在浏览器窗口查看  
        ![0cb197f317f2ff55bcd2f39489fe3bdd.png][]

![c37f1973d93302d12f651ae568c797dc.png][]

## 引入字体样式 ##

可以选择直接把字体样式下载引入到博客中，或者直接把刚才的链接引入，这里我就先选择下载到本地

*  把刚才查看的 css 代码另存为 `/themes/Butterfly/source/css/` 中，命名为 `iconfont.css`
 *  在 `_config.butterfly.yml` 中引入样式文件

# 插入代码到头部 </head> 之前 和 底部 </body> 之前
    inject:
      head:
      # - <link rel="stylesheet" href="/xxx.css">
        <link rel="stylesheet" href="/css/iconfont.css">
      bottom:
        # - <script src="xxxx"></script>

我的博客主题是 `Butterfly` 根据自己的主题参考即可

## 开始使用 ##

在 `_config.butterfly.yml` 中添加

social:
      iconfont icon-git: https://github.com/03DuLi || Github
      iconfont icon-email: mailto:duli2476@163.com || Email
      iconfont icon-gitee1: https://gitee.com/dulily || Gitee
      iconfont icon-csdn1: https://mp.csdn.net/console/article?spm=1010.2135.3001.5128 || CSDN

> 注：这里我只是引入了图标样式。没有引入图标的其他字体文件，可以根据自己的需要引入文件

样式可以查看我的[博客][Link 1]哦

[iconfont]: https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
[0cb197f317f2ff55bcd2f39489fe3bdd.png]: /images/20221119/ccb17ebbd61e405cbcefdebbb72716ab.png
[c37f1973d93302d12f651ae568c797dc.png]: /images/20221119/b213de54f2c34cd6b06820faa6f92cd6.png
[Link 1]: https://dulily.gitee.io/