NexT 主题自定义侧边栏图标

NexT 主题的图标基本上都是由 Font Awesome 提供，但是知乎、CSDN、bilibili等大多数国内应用软件的图标在Font Awesome都不支持。为了支持侧边栏各种应用小图标的显示，可以利用嵌入svg格式的图标进行实现。

本人博客实现效果如下：

本人使用博客主题为 NexT V8.11，具体的实现效果可以访问本人的博客：XiaoZeng's Blog

解决方法： 

1. 通过阿里的 iconfont 下载软件的图标，比如知乎

选择 svg 格式下载，并将图片保存在 Hexo 文件下的 source\images 路径下，如果没有 images 文件夹，则新建 images 文件夹。（注意：这里是 Hexo下的文件夹下，不是主题文件 NexT 的路径下）

 2. 设置图标格式

在 Hexo 的 source\_data 路径下，新建 styles.styl 文件， 如果没有 _data 文件夹，则新建文件夹。在 style.styl 文件中设置图标样式如下：

/* 侧边栏图标格式设置 */
.zhihu {
  background-image: url('/images/zhihu.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;
    }
}

3. 设置主题配置文件 _config 参数

在 NexT 文件夹下的 _config.yml 设置自定义文件夹路径，找到 custom_file_path 下，取消对 style 路径的注释

custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyEnd: source/_data/post-body-end.njk
  footer: source/_data/footer.njk
  #bodyEnd: source/_data/body-end.njk
  variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

4.  对 social 的图标进行设置，如下

social:
  GitHub: https://github.com/zengfanyongcn || fab fa-github
  E-Mail: mailto:zengfanyong@live.cn || fa custom outlook
  zhihu: https://www.zhihu.com/people/ceng-ceng-42-83 || fa custom zhihu
  CSDN: https://blog.csdn.net/acknole?spm=1000.2115.3001.5343 || fa custom csdn