【个人博客】Butterfly主题配置——如何使用阿里矢量图标库

【Hexo是什么?】Hexo 是一个快速、简洁且高效的博客框架。如果你想搭建属于自己的个人博客,那么Hexo框架是一个很不错的选择。Hexo的安装也相当简单,请自行百度。

【Butterfly是什么?】Butterfly是Hexo中的一个主题,也受到了很多博主的青睐,使用主题可以让自己的博客更加美观,下面放一张该主题下的主页图片。

【个人博客】Butterfly主题配置——如何使用阿里矢量图标库

在阅读了butterfly主题配置的官方文档之后,发现其对使用阿里图标库方法的描述存在一些不足,比如不能自定义图标的大小。下面说一下另一种方法:

1.注册iconfont,新建项目之后,将图标添加到自己的项目中

【个人博客】Butterfly主题配置——如何使用阿里矢量图标库

2.点击Font class中的链接,复制下来

【个人博客】Butterfly主题配置——如何使用阿里矢量图标库

3.在/source目录下新建文件夹 source/css,新建文件font.css,然后将刚刚复制的代码粘贴进去

【个人博客】Butterfly主题配置——如何使用阿里矢量图标库

4.在_config.butterfly.yml文件中找到inject,按如图所示设置

【个人博客】Butterfly主题配置——如何使用阿里矢量图标库

5.引用格式

【个人博客】Butterfly主题配置——如何使用阿里矢量图标库

至此图标已经可以正常显示,但是显示效果偏小

【个人博客】Butterfly主题配置——如何使用阿里矢量图标库

此时修改font.css文件里的font-size属性,默认是16px,我们改成22px,看一下效果

【个人博客】Butterfly主题配置——如何使用阿里矢量图标库

【个人博客】Butterfly主题配置——如何使用阿里矢量图标库

除此之外,在iconfont项目中可以点击编辑来调整图标的大小和位置,修改完保存即可

【个人博客】Butterfly主题配置——如何使用阿里矢量图标库

【个人博客】Butterfly主题配置——如何使用阿里矢量图标库

-> 加入科技玩家交流群组:点击加入 注意:
1.文中二维码和链接可能带有邀请性质,请各位玩家自行抉择。
2.请勿通过链接填写qq号与密码、银行卡号与密码等个人隐私信息。
3.禁止纯拉人头,拉app注册等信息,发现必小黑屋。
4.同一种信息仅发一次,多发会被删除。
5.文章中源码或APP等,无法保证其绝对安全,需自行辨别。
6.文章关联方不想展示也可以微信站长“socutesheep”删除。
本文由 @Ra1nB0w 发布。如若转载,请注明出处: 科技玩家 » 【个人博客】Butterfly主题配置——如何使用阿里矢量图标库

给TA买糖
共{{data.count}}人
人已买糖
教程玩家投稿

一个简单的APP自动更新+3.0助手源码

2022-3-21 22:56:39

教程玩家投稿

青龙去掉通知小尾巴

2022-3-22 23:47:52

37 条回复 A文章作者 M管理员
贴心提醒
请认真对待作者付出,勿发表无意义言论,触发过滤规则的评论将无法提交,包含敏感词的评论会自动变成待审核状态哦。
  1. xujuly2009

    打卡升级

  2. 南笙

    学习学习

  3. jerryc

    先看看,不明白的地方再问

  4. 萝卜头

    谢谢,分享学习了

  5. 呐喊

    学习学习

  6. slimei

    感谢分享,让我好好学习一下

  7. slimei

    辛苦大佬分享了,我先学习一下

  8. slimei

    辛苦了,学习一下

  9. 七年

    先看看,不明白的地方再问

  10. 白月光

    打卡学习

  11. 七年

    mark一下。

  12. slimei

    感谢分享,插眼学习

  13. 84896150

    大佬 牛逼!

  14. 七年

    七年前来顶贴!

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索