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

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

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

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

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

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

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

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

5.引用格式

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

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

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

-> 加入科技玩家交流群组:点击加入 <-
注意:
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

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

    放个演示站点就好多了

    • Ra1nB0w

      因为搭的是个人博客,不想公布出来,主要就是介绍一下这个主题的配置😂

  2. Gaodaye

    😎😎😎😎攒

  3. yml

    Butterfly yyds 话不多说 自己用就不用解释了

  4. FULI

    看着不错,目前正在用typecho简洁些写作

  5. bp

    赞,又学习到了

  6. 小朋友

    大同小异,wp也差不多的

    • Ra1nB0w

      确实,这几个都是比较常用的

  7. 青飞扬

    好东西

  8. Carol

    干货颇多,给你点点赞🤔

  9. Carol

    点赞,感觉真不错👍🏻

  10. Carol

    mark一手!不错!

  11. Carol

    牛逼,感觉这个真厉害👍🏻

  12. Carol

    本中级玩家前来顶帖😬

  13. key

    感谢大佬分享

  14.  23065

    谢谢分享

  15. PublicClassKF

    打卡升级

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