目前大多数博客网站图标都是使用Font Awesome图标库里的图标，本站刚开始也使用了原生的图标，很多网站里面都集成了Font Awesome，使用奥森图标有很多优点，用图标代替图片，加载快，使用灵活。
但是就我个人来说还是觉得彩色好看，于是就使用阿里矢量图标库里的图标，
首先这是中国人自己的图标库,其次搜索图标非常方便,而且可以上传自己制作的图标!并且可以设置彩色图标!这也是本文要讲的 Symbol引用: 这是一种全新的使用方式,应该说这才是未来的主流,这种用法其实是做了一个svg的集合,与传统方法相比具有如下 特点 :
- 支持多色图标了,不再受单色限制。
- 通过一些技巧,支持像字体那样,通过font-size,color来调整样式。
- 兼容性较差,支持 ie9 ,及现代浏览器。
- 浏览器渲染svg的性能一般,还不如png
废话不多说开始教程
图文教程
第一步： 新建项目,搜索想要的图标,并添加到项目文件夹中。
$(document).ready(function(){$(".galleryidpost").lightGallery({selector: ".yoniu-index-img",share: false,share: false,showThumbByDefault: false,autoplayControls: false});});
第二步： 在项目里，生成symbol代码。
特别注意: 在项目文件夹里面图标变动时(增加,删除等),需要重新生成链接,同时我们的引用也要刷新
$(document).ready(function(){$(".galleryidpost").lightGallery({selector: ".yoniu-index-img",share: false,share: false,showThumbByDefault: false,autoplayControls: false});});
第三步： 检测没问题后，js引入主题中
代码语言：javascript复制<!--阿里图标库-->
<script src="//at.aliimg.com/t/font_2272240_67dg5ve5q0g.js"></script>第四步： 自定义样式，我这里简单定义一下，各位根据情况自行发挥。
第五步： 选择要使用的图标,获取代码,替换名称即可 特别注意: 图标大小在第四步中的样式表自行设置，即为代码中的class，图标名前加#。
<svg class="qzicon" aria-hidden="true">
<use xlink:href="#这里填写图标名"></use></svg>效果浏览
本博客图标就是这么来的，各位也可以直接在阿里图标库网站上复制svg图标代码，原理一样。
其中可以直接设置图标宽高
