强仔
@qiangzai

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


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

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

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

图文教程

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



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


第三步: 检测没问题后,js引入主题中

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

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

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

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

效果浏览


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

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

结语

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

本文文章字数为:536个

您阅读这篇文章共花了:

文章最后更新于:2020 年 12 月 16 日 22:13:11

当前IP为:3.236.156.34,请自觉遵守网络安全

END
下午6:00 · 2020年12月15日
276
6
1
宝贝留个言吧

    糖稀     
    0个月前

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

      强仔靓仔     
      0个月前
      @糖稀

      对滴,和你一样可爱

    韩小韩博客     
    0个月前

    老铁太顶了!

      强仔靓仔     
      0个月前
    呱宝     
    18天前

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

      强仔靓仔     
      18天前
      @呱宝

      都可以的,但毕竟他们那些大站较我这小站还是更快些的

教程
网站设置彩色图标(通用)
目前大多数博客网站图标都是使用Font Awesome图标库里的图标,本站刚开始也使用了原生的图标,很多网站里面都集成了Font Awesome,使用奥森图标有很多优点,用图标代替图片,加载快,使用灵活。...
欢迎扫描二维码继续阅读
December 15, 2020
强仔博客
blogger
强仔
统计
文章:106 篇
分类:4 个
评论:313 条
加载耗时:19 ms
运行时长:1年141天
by yoniu.
强仔博客