天天看點

Volantis之引入字型圖示iconfont

生成iconfont.css檔案

✨https://www.iconfont.cn/✨

我是在這裡找字型圖示,過程如下:選擇心儀的iconfont---加入購物車---加入項目---選擇fontclass---點自動生成代碼---點生成的連接配接---複制

把字型圖示生成的 font class 檔案複制到 hexo-theme-volantis\source\css 檔案裡。我給這個檔案起的名字叫 iconfont.css。

引入字型圖示

在部落格的根目錄頁的 _config.yml 檔案裡,随便找一行,加入以下代碼:

blog/_config.yml

import:
  link:
    - <link rel="stylesheet" href="/css/iconfont.css">
           

使用字型圖示

menu:
    # The following can be written in `blog/source/_data/menu.yml`
    - name: 部落格
      icon: iconfont icon-003-sakura
      url: /
           

增加、更換字型圖示

  1. 重新生成 iconfont.css 檔案
  2. 再在合适的地方插入你的字型圖示