天天看点

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. 再在合适的地方插入你的字体图标