iconfont 多色图标使用介绍
前言
阿里巴巴矢量图标库 http://iconfont.cn 已经推出多色图标很久了,那么究竟如何使用呢?
一开始我以为和普通文字图标无区别,但实际使用的时候发现并不是。
多色文字图标其实是用svg做的,需要引用js才能正确使用,优缺点也比较明显,但是这种方式是符合未来发展方向的,值得推荐使用的。
一、多色文字图标特点
1、支持多色图标了,不再受单色限制。
2、通过一些技巧,支持像字体那样,通过font-size,color来调整样式。
3、兼容性较差,支持 ie9+,及现代浏览器。
4、浏览器渲染svg的性能一般,还不如png。
二、多色文字图标使用方式
1、先在iconfont.cn下载自己需要使用的多色图标
2、引用js、调用图标
示例代码:
<!-- 引用js -->
<script src="iconfont.js"></script>
<!-- 设置css -->
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<!-- 使用图标 -->
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-user"></use>
</svg>
想使用哪个图标,则设置是use元素中的 xlink:href 值为图标的class名称即可,例如
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-user"></use>
</svg>
三、修改颜色
我们通过审查元素看到图标其实是svg来实现的的,svg下面有很多个path,就是图标的组件,例如这个用户图标是由前后2个人形组件组成的,可以通过css来设置图标和组件颜色,不过比较麻烦。
我们看到path里面有fill属性控制图标颜色,但如果是动态设置fill则无效果,那么要修改颜色,最简单方法是先去掉icons.js里面的fill属性,然后修改svg的color就可以了,如下:
如果只修改一个组件的颜色,那么要到icons.js里面去掉该组件的颜色,然后设置svg的color即可(感觉不够灵活啊)
结语
介绍结束,希望对你有帮助。