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

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:

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

social: Bilibili: || 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://zywvvd.com/2020/03/28/next/20_custom_style/custom-style/​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。