Volantic之引入字体图标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">

使用字体图标

在你需要加入字体图标的地方,比如 _config.volantis.yml 文件menu中的某个icon使用

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

就像这样,其中iconfont是必须要加入的,icon-003-sakura是你所选择的iconfont的编号,在网页中可以直接复制过来。

增加、更换字体图标

非常简单,只需要:

  1. 重新生成 iconfont.css 文件
  2. 再在合适的地方插入你的字体图标
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值