How to customize iconfont icon in Hexo fluid theme

・ Linux

#Hexo

What we do in this article?

if you want to change the menu button ( Marked as red below the Picture ) as I did. This article is gonna help you to do that.

image-20240207175312883

Use default icon

Please check fluid docs https://hexo.fluid-dev.com/docs/icon/

Customize icon

  1. Search the icon from https://www.iconfont.cn/ and add to your own Inventory.

  2. Download the entire inventory with source code:

    image-20240207180914835.png

  3. Unzip the downloaded inventory and rename it, then copy to hexo/themes/fluid/source/css

    # ls -l themes/fluid/source/css/custom_icon
total 64
-rw-r--r-- 1 jason  8429  2  7 17:16 demo.css
-rw-r--r-- 1 jason 15203  2  7 17:16 demo_index.html
-rw-r--r-- 1 jason   797  2  7 17:16 iconfont.css
-rw-r--r-- 1 jason 19634  2  7 17:16 iconfont.js
-rw-r--r-- 1 jason  1723  2  7 17:16 iconfont.json
-rw-r--r-- 1 jason  5080  2  7 17:16 iconfont.ttf

  4. Add custom_css (which download from last step) to hexo configuration file which is _config.fluid.yml:

    # vim _config.fluid.yml
# The usage is the same as custom_js
custom_css:
 	- /css/custom_icon/iconfont.css # make sure the path is correct

  5. Open demo_index.html and Find the icon name from demo_index.html just like below:

    image-20240207182153857

  6. Add new icon name to hexo configuration file (_config.fluid.yml):

    image-20240207182727863

  7. Save the changes and run hexo g && hexo s to test.

    image-20240207183304203