next主题自定义侧边栏链接图标（新方法）

之前设置next主题下的social这一项

里面的内容是固定的，那么，比如我想添加其他的行不行，按照上面的格式，添加名称和链接，编译之后，确实可行，但是只有文字，没有图标，这样的话视觉效果就大打折扣。

接着就在网上找方法，大多数都是让你先下载svg格式的图标，放在根目录下source\images中，然后在根目录source\data文件里新建styles.styl 文件，然后添加代码：

/* 侧边栏图标格式设置 */
.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;
    }
} 

最后取消掉style: source/_data/styles.styl这一项的注释

但是无论我怎么试都无法实现，后续又试了网上的其他方法都没有，于是我想放弃了，然后我想先设置背景图片，在网上找了一个方法，和设置链接图标也是一样的步骤，但是也失败了，后面我接着在网上找，终于找到一个方法，那就是把图片放在\themes\next\source\images目录下，然后在\themes\next\source\css目录下的main.styl添加代码，居然成功了。

然后我开始思考，既然网上的教程，配置背景图片和配置链接图标步骤是一样的，那么我也可以用设置背景图片一样的方法去设置链接图标。

比如哔哩哔哩，首先去阿里云下载svg格式的图标

然后再将上面的代码也添加到main.styl文件中，最后在social项下图片来源设置为 fa bilibili

 

 果然，真的可以了