怎么在Hexo博客里使用自定义图标

官方文档里面是这么说的：

image-20260415224237125

但是我没看懂。其实，需要这些步骤：

只用做一次的步骤

如果你是第一次在Hexo博客里使用自定义图标，你需要：

1. 进入iconfont，注册一个账号。

2. 在「资源管理」里，发起一个项目，项目名字可以是blog或者任何你喜欢的名字。

   

   image-20260415224453755

3. 在「首页」里搜索素材，把你喜欢的素材加入购物车。

   

   image-20260415224704606

4. 然后点击购物车，把素材加入项目。

   

   image-20260415224739273

5. 打开你的Hexo的_config.fluid.yml，修改如下字段：

   # 指定自定义 .css 文件路径，用法和 custom_js 相同
   # The usage is the same as custom_js
   custom_css: 
     - /css/custom.css
     - /css/indeximg-hover.css
     - /css/scrollAnimation.css
     - /css/iconfont.css #增添这一行内容

以后每次都要做的内容

1. 回到「资源管理」，点击你的项目，点击「下载至本地」，你会得到这样的一个压缩包

   

   image-20260415224841727

2. 把压缩包中的文件iconfont.css放置在

   blog\source\css\iconfont.css

   这个路径下。

   把压缩包中的文件iconfont.ttf，iconfont.woff，iconfont.woff2放置在

   blog\source\fonts\

   这个路径下。

3. 用文本编辑器打开iconfont.css，作如下修改：

   修改前：

   @font-face {
     font-family: "iconfont"; /* Project id xxx */
     src: url('iconfont.woff2?t=xxx') format('woff2'),
          url('iconfont.woff?t=xxx') format('woff'),
          url('iconfont.ttf?t=xxx') format('truetype');
   }

   修改后

   @font-face {
     font-family: "iconfont"; /* Project id xxx */
     src: url('../fonts/iconfont.woff2?t=xxx') format('woff2'),
          url('../fonts/iconfont.woff?t=xxx') format('woff'),
          url('../fonts/iconfont.ttf?t=xxx') format('truetype');
   }

   即，在三个URL前添加../fonts

4. 在CSS中，找到下面的字段：

   .icon-wenquan:before {
     content: "\e6ee";
   }
   
   .icon-coffee:before {
     content: "\e7f1";
   }
   ...

   这个icon-coffee，就是你的图标的名字。

5. 在_config.fluid.yml里，像这样调用：

   { key: "电研部", link: "https://blog.sakizuki.site/", icon: "iconfont icon-xxx（刚才上面的名字）" }

---

本站的运行成本约为每个月5元人民币，如果您觉得本站有用，欢迎打赏，或者给本博客的GitHub项目点一颗星