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

原创

LonelySnowman

发布于 2022-12-16 16:14:16

6250

发布于 2022-12-16 16:14:16

文章被收录于专栏：码农生活码农生活码农生活

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