前言

  • Butterfly 主题内置了 Font Awesome V5 图标，目前已更新到 5.13.0，总共有 1,588 个免费图标。由于是国外的图标网站，对于国内的一些网站 Icon 并不支持。如有需要，你可以引入其它的图标服务商。
  • 下面介绍 iconfont - 阿里巴巴矢量图标库引入自定义 icon

实操

注册iconfont账号

  • 这步应该不用说了叭，官网在上面！

iconfont登录页

添加图标并入库

  • 搜索想要的图标，添加到购物车并添加到项目（没有新建一个）

image-20240413153342658

生成CSS 链接

  • 添加成功后跳转到我的项目中，点击 Font class，点击生成在线链接

image-20240413153451145

添加链接进主题配置文件

  • 打开_config.butterfly.yml，找到 inject 配置，按要求把链接填入
1
2
3
4
5
6
7
8
9
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    - <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4506285_hr105kq4f2q.css">
    # - <link rel="stylesheet" href="/xxx.css">
  bottom:
    # - <script src="xxxx"></script>
  • 在我们需要使用的地方填入 icon，例如 icon-Bing，图片使用格式为 iconfont icon 名字，我的社交图标配置：
1
2
3
4
5
social:
   fab fa-github: https://github.com/xingye391 || Github
   iconfont icon-Bzhan: https://space.bilibili.com/1896203774 || bilibili
   iconfont icon-gitee: https://gitee.com/XINGYE391 || Gitee
   fas fa-envelope: mailto:1447424604@qq.com || Email

添加博客样式文件

  • 因为第三方图标样式可能和主题内置图标样式不一致，需要修改：

    新建博客根目录/source/css/xingye391.github.io.css，xingye391.github.io.css 这里修改为你自己的网站，样式文件内容：

1
2
3
4
/* 第三方图标样式 */
.iconfont {
    font-size: 18px;
}
  • 修改_config.butterfly.yml：
1
2
3
4
5
6
7
8
9
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    - <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4506285_bvygb30mx4.css">
    - <link rel="stylesheet" href="/css/xingye391.github.io.css">
  bottom:
    # - <script src="xxxx"></script>

效果预览

image-20240413161058370