【Butterfly美化】Hexo Butterfly主题使用阿里巴巴iconfont
2023-02-18 16:31:24 时间
Butterfly主题使用阿里巴巴iconfont
⛄yooo~ 今天教大家美化Butterfly的字体图标
⛄Butterfly主题支持 font-awesome v6 但是还是不够用怎么办呢?
⛄可以使用阿里巴巴iconfont来拓展啦
- Butterfly版本:4.5.1
选择图标
- iconfont图标库地址:iconfont-阿里巴巴矢量图标库
- 找到自己需要的图标之后点击 添加入库
- 将图标添加至项目中
- 生成代码 并 复制代码
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
⛄以上就是全部配置内容啦
⛄如果对你有帮助请给我点赞吧
相关文章
- 第十四届蓝桥杯集训——JavaC组第八篇——进制转换
- 第十四届蓝桥杯集训——JavaC组第九篇——位运算符
- 第十四届蓝桥杯集训——JavaC组第九篇——三元运算符
- 【数据挖掘】薪酬分段对应工作经验/学历画柱状图【招聘网站的职位招聘数据预处理】
- Grafana 的介绍和安装
- SpringSecurity用户绑定到线程
- SpringSecurity权限过滤
- 汇编学习(6), 外部函数,调用约定
- 汇编学习(7), Bit 操作
- JDK19都出来了~是时候梳理清楚JDK的各个版本的特性了【JDK13特性讲解】
- Discourse 本地开发环境时候出现代理错误
- 在 Ubuntu 上安装 Discourse 开发环境
- SpringBoot实战:整合Swagger3实现在线Api文档
- RabbitMQ:基础概述
- 【C语言进阶】使用memcpy你需要注意的一个问题
- MyBatis详解(二)
- 新华三防疫绿码通解决方案
- 数字城市运营中心方案
- 新型智慧城市-新型基础设施建设综合方案
- 商业银行企业级IT架构规划