前言

由于Butterfly主题使用的是Font Awesome图标库，当我们想要使用到该图标库里没有的图标时就需要修改配置文件将PNG图标存放到指定路径上，下面介绍详细操作。

步骤

1. 获取图标
这里针对算法竞赛选手给出我找到的常用竞赛网站的网址：

CodeForces-icon-96x96
AtCoder-icon-trans
LeetCode-icon-32x32
NowCoder-icon-32x32

在知道图标的url后可以直接使用这个favicon，或者下载下来并将其放到你的博客项目中。
这里我下载的路径是[BlogRoot]/source/img/xxx.png

2. 添加你需要的社交图标配置
在你的 _config.butterfly.yml 文件的 social 部分，添加你的图标配置：

1
2
3
4
5
6
7
social:
  fab fa-bilibili: https://space.bilibili.com/你的bilibili主页 || BiliBili || '#ff6396' 
  fab fa-github: https://github.com/你的Github用户名 || Github || '#24292e'
  custom_codeforces: https://codeforces.com/profile/你的cf主页 || CodeForces || '#1f8acb'
  custom_atcoder: https://atcoder.jp/users/你的atc主页 || AtCoder || '#2b292a'
  custom_leetcode: https://leetcode.cn/u/你的力扣主页/ || LeetCode || '#FFA116'
  custom_nowcoder: https://ac.nowcoder.com/acm/contest/profile/你的牛客竞赛主页 || Nowcoder || '#1f8acb'

3. 自定义你的图标的CSS
在[BlogRoot]/source/css/custom.css文件中，添加你要添加的牛客图标的CSS样式，这里介绍两种方式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*自定义社交图标*/
/*方式1. url为相对路径*/
.custom_codeforces {
  display: inline-block;
  width: 20px;   /* 图标宽度 */
  height: 20px;  /* 图标高度 */
  background: url('/img/cf-favicon-96x96.png') no-repeat center;
  background-size: contain;
  vertical-align: middle;
}
/*方式2. url为网址或你图床的网址*/
.custom_nowcoder {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('https://www.nowcoder.com/favicon.ico') no-repeat center;
  background-size: contain;
  vertical-align: middle;
}

4. 清理并重新生成
这将清理缓存并重新生成Hexo博客。现在你应该能够看到你的自定义图标了

1
hexo cl; hexo g; hexo s

5. 调试
如果图标没有显示，请检查：

  • 浏览器开发者工具（按F12），查看是否正确加载了图标
  • CSS样式是否被正确应用，路径是否正确

效果图

可以看到已经配置成功了，在博客的个人名片上 我们能够点击我们添加的图标跳转到我们的各种网站的个人主页。
个人名片.png