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/

Hexo + NexT 通过自定义样式添加 Bilibili 图标相关推荐

『参考』.net CF组件编程（4）——为自定义组件添加工具箱图标!
前言: 在前三篇的文章中,和大家一起创建了一个用于TCP连接检测的小组件,如果你记不得了,可以通过以下链接去回顾一下: 『参考』.net CF组件编程(1)--基础之后『参考』.net CF组件编程 ...
hexo next 解决自定义侧边栏用户社交链接小图标 custom sidebar social icon
背景 next主题下侧边栏社交链接小图标默认从FontAwesome网站获取图标,但是国内某些网站,如Bilibili,网易云等等,并不支持. 博主希望能够自定义各种侧边栏小图标,目前搜索到的教程并不 ...
vue-amap中添加高德地图地图的自定义样式
高德地图的自定义官方样式列表: 使用: amap://styles/+ 样式的名称如: 使用标准颜色 amap://styles/normal 依次类推 normal (标准).dark(幻影黑). ...
php form 添加滚动条,element 使用总结(1. tree使用 2. table修改滚动条样式 3. el-form 自定义label添加icon)...
一, vue_elementUI_ tree树形控件 1.默认点击tree节点的第一个(注意不是checked选中) @node-drop="handleDrop"ref=&qu ...
php 添加样式,PHP实现可自定义样式的分页类
本文实例为大家分享了PHP实现可自定义样式的分页类,供大家参考,具体内容如下 //namespace Component; /** * 2016-3-27 * @author ankang */ cl ...
微信公众号自定义菜单添加emoji表情图标
微信公众号自定义菜单添加emoji表情图标第一步:打开微信公众平台接口调试工具,点击前往接口调试工具: 第二步:把这段代码 {"button":[{"sub_but ...
H5 audio 音频标签自定义样式修改以及添加播放控制事件
20181023 更新原来的代码拖动进度点只写了mouse事件,手机端的话应该是touch事件.所以出现了有朋友说的移动端无法拖动进度条的问题.现在更新的代码已经加上touch事件,即无论是手机模式 ...
html怎样做删除的图标,bootstrap如何添加删除图标样式？
bootstrap如何添加删除图标样式?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. Bootstrap 捆绑了 200 多种字体格式的字形.首先让我们 ...
Threejs物联网，养殖场3D可视化（三）模型展示，轨道控制器设置，模型沿着路线运动，模型添加边框，自定义样式显示标签，点击模型获取信息
1,介绍该示例使用的是 r95版本Three.js库. 主要实现功能:引用养殖场模型进行展示,轨道控制器设置,模型沿着路线运动,使用OutlinePass给模型添加边框,自定义样式显示标签,点击模型 ...

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

Hexo + NexT 通过自定义样式添加 Bilibili 图标相关推荐

最新文章

热门文章