【Butterfly美化】Hexo Butterfly主题使用阿里巴巴iconfont

简介: Butterfly主题支持 font-awesome v6 但是还是不够用怎么办呢?可以使用阿里巴巴iconfont来拓展啦,今天教大家在Hexo中使用阿里巴巴iconfont矢量图标库。

Butterfly主题使用阿里巴巴iconfont

⛄yooo~ 今天教大家美化Butterfly的字体图标

⛄Butterfly主题支持 font-awesome v6 但是还是不够用怎么办呢?

⛄可以使用阿里巴巴iconfont来拓展啦

  • Butterfly版本:4.5.1

选择图标

image-20221216150757553

image-20221216151815641

  • 将图标添加至项目

image-20221216152011483

  • 生成代码复制代码

image-20221216152423462

image-20221216153030113

Butterfly配置

新建css文件

  • 在Butterfly主题文件夹下的 /source/css 文价夹中新建 font.css 吧复制的代码粘贴进去
/* font.css */
@font-face {
  font-family: "iconfont";
  src: url('//at.alicdn.com/t/c/font_3829267_g9vxomx6ua4.woff2?t=1671175363970') format('woff2'),
       url('//at.alicdn.com/t/c/font_3829267_g9vxomx6ua4.woff?t=1671175363970') format('woff'),
       url('//at.alicdn.com/t/c/font_3829267_g9vxomx6ua4.ttf?t=1671175363970') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px; /* 字体大小自行修改 */
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-github:before {
  content: "\ea0b";
  color: red; /* 图标颜色需要自行修改 */
}

/*
 此处省略项目中其他字体代码
*/

引入css文件

  • 在Butterfly主题文件夹下的 _config.yml 修改配置
# 省略其他代码

inject:
  head:
    - <link rel="stylesheet" href="/css/font.css"> # 引入刚刚新建的css文件
  bottom:
    # - <script src="xxxx"></script>
    
# ...

使用iconfont

  • 在Butterfly主题文件夹下的 _config.yml 修改配置
  • 使用格式 iconfont <icon名>
  • icon名可在iconfont项目中查看
# 可配置导航栏
menu:
    首页: / || iconfont icon-home
    # ...

# ...

# 可配置社交图标
social:
    iconfont icon-csdn: https://blog.csdn.net/xxx || CSDN
    iconfont icon-juejin: https://juejin.cn/user/xxx || 掘金
    fab fa-github: https://github.com/xxx || Github
⛄以上就是全部配置内容啦

⛄如果对你有帮助请给我点赞吧

相关文章
|
6月前
|
固态存储 安全 测试技术
别再用盗版镜像了!官方渠道获取Win10 ISO+VMware正版激活全流程
本文详细介绍了在VMware虚拟机上安装Windows 10系统的全流程,涵盖环境准备、虚拟机配置、系统安装及优化等关键步骤。内容包括软件资源获取(如VMware与Win10镜像下载链接)、硬件要求核查、虚拟机创建与参数设置(如UEFI/BIOS选择、处理器与内存分配),以及系统安装中的具体操作和常见问题解决方法。此外,还提供了性能调优方案(如显卡加速、快照管理)和高频问题解决方案,确保用户避开常见坑点。最后附有配套资源包和数据验证结果,帮助用户高效完成搭建并提升使用体验。
6272 17
|
运维 Devops Java
阿里巴巴DevOps实践指南(十三)| 测试提效
分布式测试为测试速度插上了翅膀,精准测试有效的识别出了测试的范围,增量覆盖率又为测试的不断完备提供了有利的指引,线上覆盖率帮助我们有效的进行应用瘦身。充分利用好这些技术手段进行测试提效,可以让持续交付的过程更加的顺畅
阿里巴巴DevOps实践指南(十三)| 测试提效
Gridea 上手教程——小白也可以用的GitHub Pages 搭建工具
Gridea 上手教程——小白也可以用的GitHub Pages 搭建工具
Gridea 上手教程——小白也可以用的GitHub Pages 搭建工具
|
搜索推荐
优雅的使用Webstack打造个人网址导航
Webstack一个开源的公益项目,你可以拿来制作自己的网址导航,多种主题版本供你选择,个人选择的是Hexo。
1321 1
优雅的使用Webstack打造个人网址导航
|
Linux Docker 容器
5分钟搭建heimdall定制导航页
5分钟搭建heimdall定制导航页
920 0
5分钟搭建heimdall定制导航页
|
网络安全 Android开发 iOS开发
Mac下安卓模拟器使用Burpsuite抓包方法
Mac下安卓模拟器使用Burpsuite抓包方法
957 0
Mac下安卓模拟器使用Burpsuite抓包方法
|
机器学习/深度学习 网络协议 数据建模
世界各国浏览器语言代码本地化对照表
世界各国浏览器语言代码本地化对照表
|
存储 Shell
紧急新闻,gitee图床崩了,教大家如何搭建自己的图床?
紧急新闻,gitee图床崩了,教大家如何搭建自己的图床?
紧急新闻,gitee图床崩了,教大家如何搭建自己的图床?
|
弹性计算 缓存 网络协议
阿里云服务器u1实例ecs.u1-c1m1.large通用算力型CPU性能评测
阿里云服务器u1实例ecs.u1-c1m1.large通用算力型CPU性能评测
623 0
阿里云服务器u1实例ecs.u1-c1m1.large通用算力型CPU性能评测
|
缓存 搜索推荐 Shell
Hexo 博客主题更换和基础配置
Hexo 博客主题更换和基础配置
563 0

热门文章

最新文章