现在网络上有很多矢量图标库,但是能自定义的却很少,不能自定义的体积就很大,造成不必要的浪费。阿里巴巴矢量图标库Iconfont很好的规避了这个问题,能够自定义添加图标到你定义的项目中,运用也很简单。
选择图标
打开阿里巴巴矢量图标库首页,选择你心仪的库,这里可以随便选择,可以组合的,如下图:
阿里巴巴矢量图标库的使用方法
选择具体图标,添加入库
右上方,点击库查看已经入库的图标,并添加至项目。也可以直接下载,点击下载素材,选择颜色,格式(SVG、AI、PNG),完成下载。
添加至项目后,可以在图标管理=>我的项目中查看已经添加的图标
运用到项目
unicode引用
unicode是字体在网页端最原始的应用方式,特点是:
- 兼容性最好,支持ie6+,及所有现代浏览器。
- 支持按字体的方式去动态调整图标大小,颜色等等。
- 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。
注意:新版iconfont支持多色图标,这些多色图标在unicode模式下将不能使用,如果有需求建议使用symbol的引用方式
是不是so easy,以后在你的项目中就可以使用矢量图标了,而且阿里提供很多种,供大家选择使用,都是免费的哦。