网站设置彩色图标（通用）

目前大多数博客网站图标都是使用Font Awesome图标库里的图标，本站刚开始也使用了原生的图标，很多网站里面都集成了Font Awesome，使用奥森图标有很多优点，用图标代替图片，加载快，使用灵活。

但是就我个人来说还是觉得彩色好看，于是就使用阿里矢量图标库里的图标，

首先这是中国人自己的图标库,其次搜索图标非常方便,而且可以上传自己制作的图标!并且可以设置彩色图标!这也是本文要讲的 Symbol引用: 这是一种全新的使用方式,应该说这才是未来的主流,这种用法其实是做了一个svg的集合,与传统方法相比具有如下 特点 :

1. 支持多色图标了,不再受单色限制。
2. 通过一些技巧,支持像字体那样,通过font-size,color来调整样式。
3. 兼容性较差,支持 ie9+,及现代浏览器。
4. 浏览器渲染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引入主题中

<!--阿里图标库-->
<script src="//at.aliimg.com/t/font_2272240_67dg5ve5q0g.js"></script>

第四步： 自定义样式，我这里简单定义一下，各位根据情况自行发挥。

第五步： 选择要使用的图标,获取代码,替换名称即可 特别注意: 图标大小在第四步中的样式表自行设置，即为代码中的class，图标名前加#。

    <svg class="qzicon" aria-hidden="true">    
    <use xlink:href="#这里填写图标名"></use></svg>

效果浏览

本博客图标就是这么来的，各位也可以直接在阿里图标库网站上复制svg图标代码，原理一样。

其中可以直接设置图标宽高