教程
网站设置彩色图标(通用)
767

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


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

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

  1. 支持多色图标了,不再受单色限制。
  2. 通过一些技巧,支持像字体那样,通过font-size,color来调整样式。
  3. 兼容性较差,支持 ie9+,及现代浏览器。
  4. 浏览器渲染svg的性能一般,还不如png

废话不多说开始教程

图文教程

第一步: 新建项目,搜索想要的图标,并添加到项目文件夹中。



第二步: 在项目里,生成symbol代码。
特别注意: 在项目文件夹里面图标变动时(增加,删除等),需要重新生成链接,同时我们的引用也要刷新


第三步: 检测没问题后,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图标代码,原理一样。

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

结语

感谢访问强仔博客,希望本文对你有所帮助。

end
  • 上一篇
  • 下一篇
  • 添加评论
    评论(6)
    糖稀
    糖稀

    可爱的图标,iconfont确实很有前景,一直在引用。

    强仔
    Q
    强仔
    韩小韩博客
    韩小韩博客

    老铁太顶了!

    呱宝
    呱宝

    不是很懂为啥都不用本地图标。一共就那么几个几十kb图,能拖慢多少加载呢

    强仔
    Q
    强仔
    welcome to qiangzai blog