简述： 今天在用iconfont-阿里巴巴矢量图标库的时候就想着把上面的小图标加入到Yun主题上的sidebar里面加入CSDN小图标。效果可以看看我现在的侧边栏。

本文初发于 “曾晨de小站” zengchen233.cn，同步转载于此。

一些正常的步骤在网上可以搜到，但是当时的方法已经不管用，需要更改一些步骤，现在由我来讲述：

image-20210522214430218

选择添加入库,然后会在侧边栏上选择添加入库。这样在你建成的项目里面就添加了刚刚存在的图标。

image-20210522214533659

就会看到这样一个页面，选择Symbol，点击这个链接，另存为到本地的js文件夹，选择Font Class然后在hexo的theme文件夹

在Yun/_config.yml中加入以下代码：

# stylesheets loaded in the <head>
css:
  - /css/hexo-theme-yun.css
  - /css/iconfont.css

# scripts loaded in the end of the <head>
js:
  - /js/utils.js
  - /js/hexo-theme-yun.js
  - /js/iconfont.js

顺便还要在css文件加入以下代码：

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

这样就可以复制icon的代码啦！

例如：

icon-Gitee icon-gitee icon-csdn1 icon-csdn

这就大功告成啦！

参考