背景
next主题下侧边栏社交链接小图标默认从FontAwesome网站获取图标，但是国内某些网站，如Bilibili，网易云等等，并不支持。
博主希望能够自定义各种侧边栏小图标，目前搜索到的教程并不能解决该问题。
hexo+next主题侧边栏社交小图标设置的问题
Hexo + NexT 通过自定义样式添加 Bilibili 图标
NexT sidebar setting document
经过一番尝试后，最终解决，效果图如下：
博主使用的版本号为：
hexo: 5.4.1
hexo-cli: 4.3.0
next：7.8
解决方法
下载小图标
在iconfont可以选择想要下载的图标，如Bilibili
选择svg格式下载
将图片保存在\source\images路径下，注意这里的source是在hexo文件夹中，不是next主题文件夹。
如果没有images文件夹请自行创建。
自定义图标格式
在hexo文件夹中，在\source\ _data路径下新建styles.styl文件。
如果没有_data文件夹请自行创建。
在styles文件中添加如下样式
/* sidebar social icon */.bilibili {background-image: url('/images/bilibili.svg');background-size: 1em 1em;opacity: 0.55;background-position: 0.05rem 0.2rem;background-repeat: no-repeat;height: 1rem;width: 1rem; border-radius: 0rem;/*鼠标停留在图标上时，图标呈现发光效果*/&:hover {opacity: 1;}}
修改config文件
进入next主题下的config配置文件
找到custom file paths
# Define custom file paths.# Create your custom files in site directory `source/_data` and uncomment needed files below.custom_file_path:#head: source/_data/head.swig#header: source/_data/header.swig#sidebar: source/_data/sidebar.swig#postMeta: source/_data/post-meta.swig#postBodyEnd: source/_data/post-body-end.swig#footer: source/_data/footer.swig#bodyEnd: source/_data/body-end.swig#variable: source/_data/variables.styl#mixin: source/_data/mixins.stylstyle: source/_data/styles.styl
取消对styles的注释
再找到social link对小图标进行修改
# Social Links# Usage: `Key: permalink || icon`# Key is the link label showing to end users.# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.social:Bilibili: /yourname || custom bilibili#Weibo: /yourname || weibo#Google: /yourname || google#Twitter: /yourname || twitter#FB Page: /yourname || facebook#StackOverflow: /yourname || stack-overflow#YouTube: /yourname || youtube#Instagram: /yourname || instagram#Skype: skype:yourname?call|chat || skype
注意在图标前加上custom
