在 Hexo 中使用 iconfont 图标

iconfont首页

iconfont 获取

  • 可以先在首页搜索你想要的图标,然后添加到购物车中,然后把购物车中的图标添加到项目中,如果没有项目的话可以新建一个项目。
  • 生成在线链接
    • 点击 font class 按钮直接就可以生成链接了
    • 复制生成的链接地址,在浏览器窗口查看

引入字体样式

可以选择直接把字体样式下载引入到博客中,或者直接把刚才的链接引入,这里我就先选择下载到本地

  • 把刚才查看的 css 代码另存为 /themes/Butterfly/source/css/ 中,命名为 iconfont.css
  • _config.butterfly.yml 中引入样式文件
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
  # - <link rel="stylesheet" href="/xxx.css">
    <link rel="stylesheet" href="/css/iconfont.css">
  bottom:
    # - <script src="xxxx"></script>

我的博客主题是 Butterfly 根据自己的主题参考即可

开始使用

_config.butterfly.yml 中添加

social:
  iconfont icon-git: https://github.com/03DuLi || Github
  iconfont icon-email: mailto:duli2476@163.com || Email
  iconfont icon-gitee1: https://gitee.com/dulily || Gitee
  iconfont icon-csdn1: https://mp.csdn.net/console/article?spm=1010.2135.3001.5128 || CSDN

注:这里我只是引入了图标样式。没有引入图标的其他字体文件,可以根据自己的需要引入文件

样式可以查看我的博客

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值