Hexo + NexT 通过自定义样式添加 Bilibili 图标

NexT 默认使用 Font Awesome 库作为 icon 库。美中不足的是，有一些中国的社交网站的图标在 Font Awesome 库中并没有提供，包括我们熟悉的哔哩哔哩、豆瓣、简书等等。所以如果想使用这些图标，就需要我们使用本地图标进行手动添加。

首先，可以在 阿里巴巴矢量图标库 之类的网站找到你需要的图标，下载 SVG 格式文件。以 Bilibili 为例，将 SVG 文件放置在 hexo 工程的 /source/images/bilibili.svg 中。

编辑 source/_data/styles.styl 文件（如果没有请自行创建），并添加如下样式：

.fa-bilibili {
  background: url(/images/bilibili.svg);
  background-position: 50% 75%;
  background-repeat: no-repeat;
  height: 1rem;
  width: 1rem;
}

注意：是 hexo 工程目录下的 source 目录，不是 theme 主题下的 source 目录哦~

接下来在主题配置文件（比如 theme/next/_config.yml）中取消 custom_file_path 的 style 段的注释。

custom_file_path:
  style: source/_data/styles.styl

最后，在主题配置文件（比如 theme/next/_config.yml）的社交链接中进行引用即可。

social:
  Bilibili: https://space.bilibili.com/userid/ || fab fa-bilibili

---

T T 哈哈，可是我使用 hexo-cli 4.2.0 和 NexT 8.2.1 没弄成功，谁能告诉我怎么弄？

参考阅读：

• https://theme-next.js.org/docs/advanced-settings/custom-files.html#Custom-Icon-Image
• https://www.zywvvd.com/2020/03/28/next/20_custom_style/custom-style/