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

2020-12-15T18:00:00

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


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

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

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

图文教程

[c=red]第一步:[/c] 新建项目,搜索想要的图标,并添加到项目文件夹中。
[xiangce][/xiangce]
[c=red]第二步:[/c] 在项目里,生成symbol代码。
[c=green]特别注意:[/c] 在项目文件夹里面图标变动时(增加,删除等),需要重新生成链接,同时我们的引用也要刷新
[xiangce][/xiangce]
[c=red]第三步:[/c] 检测没问题后,js引入主题中

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

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

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

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

效果浏览


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

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

结语

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

当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »