现在网络上有很多矢量图标库，但是能自定义的却很少，不能自定义的体积就很大，造成不必要的浪费。阿里巴巴矢量图标库Iconfont很好的规避了这个问题，能够自定义添加图标到你定义的项目中，运用也很简单。e4W数据军团

选择图标e4W数据军团

打开阿里巴巴矢量图标库首页，选择你心仪的库，这里可以随便选择，可以组合的，如下图：阿里巴巴矢量图标库Iconfont的使用方法e4W数据军团

阿里巴巴矢量图标库的使用方法e4W数据军团

选择具体图标，添加入库阿里巴巴矢量图标库Iconfont的使用方法e4W数据军团

右上方，点击库查看已经入库的图标，并添加至项目。也可以直接下载，点击下载素材，选择颜色，格式（SVG、AI、PNG），完成下载。阿里巴巴矢量图标库Iconfont的使用方法e4W数据军团

添加至项目后，可以在图标管理=>我的项目中查看已经添加的图标阿里巴巴矢量图标库Iconfont的使用方法e4W数据军团

运用到项目e4W数据军团

阿里巴巴矢量图标库Iconfont的使用方法e4W数据军团

unicode引用e4W数据军团

unicode是字体在网页端最原始的应用方式，特点是：e4W数据军团

  1. 兼容性最好，支持ie6+，及所有现代浏览器。e4W数据军团

  2. 支持按字体的方式去动态调整图标大小，颜色等等。e4W数据军团

  3. 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。e4W数据军团

注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式e4W数据军团

是不是so easy，以后在你的项目中就可以使用矢量图标了，而且阿里提供很多种，供大家选择使用，都是免费的哦。e4W数据军团

大家都在看

版权声明：本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件举报，一经查实，本站将立刻删除。