Hexo的Fluid主题中自定义iconfont图标

Hexo的Fluid主题介绍

  Hexo是一个快速、简洁且高效的博客框架。 Hexo使用Markdown（或其他标记语言）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

  Fluid是Hexo中一个优雅的主题，这是一款Material Design风格的Hexo主题，以简约的设计帮助你专注于写作，其配置页面可参考https://hexo.fluid-dev.com/docs/guide/ .

  Fluid主题中的主页（about）中可使用社交图标，使用可参考https://fluid-dev.github.io/hexo-fluid-docs/icon/ . 但主页内置的社交图标太少，有时候我们需要自定义图标。

  本文将介绍在Hexo的Fluid主题中自定义iconfont图标，并纠正现有公开博客文章的错误。

如何自定义iconfont图标

  iconfont是国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能，由阿里巴巴体验团队倾力打造，是一款有助于设计和前端开发的便捷工具，网址为：https://www.iconfont.cn/ .

  在Hexo的Fluid主题中自定义iconfont图标的步骤（以今日头条图标为例）如下：

1. 在iconfont网站中搜索今日头条图标，添加至购物车，并下载代码至本地；

2. 将下载代码压缩文件解压，并重命名为toutiao；

3. 将toutiao文件夹放至Hexo项目中的source/css文件夹下；

4. 在_config.fluid.yml文件中配置如下：

skip_render:
  - 'css/**/*'
  
custom_css:
  - /css/toutiao/iconfont.css

about:
  avatar: /img/avatar.png
  name: "Fluid"
  intro: "个人博客"
  icons:
    - {
    
     class: 'icon iconfont icon-jinritoutiao', link: 'you own toutiao website', tip: '今日头条'}

5. 部署Hexo，结果如下：
   

纠错之处

  在上述配置中的第4步，现在很少有参考文章，而仅有的中文参考文章中的配置icons中的class方法是不正确的。

  正确的方法是打开toutiao文件夹中的示例页面（demo_index.html），右击Font Class中的图标，选择查看：

扫描二维码关注公众号，回复： 16072136 查看本文章

  class应该选择如下：

  以上是本文对现有的公开博客文章关于如何在Hexo的Fluid主题中配置icons的class的纠正之处。

  欢迎访问本人的个人博客：https://percent4.github.io/ .