iconfont 原理[编辑]

---

一、iconfont介绍

IconFont平台是由阿里巴巴UX部门推出的矢量图标管理网站，也是国内首家推广Webfont形式图标的平台。网站涵盖了1000多个常用图标并还在持续更新中，Iconfont平台为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。同时iconfont平台作为矢量图标倡导者，积极在线分享矢量图标制作经验、前端应用说明，及应用中常见的一些问题。

二、功能

1、在线图标搜索

2、图标分捡下载

3、在线储存

4、矢量格式转换

5、图标库管理

三、代码应用

1、icon单个使用

单个图标用户可以自行选择下载不同的格式使用，包括png,ai,svg。此种方式适合用在图标引用特别少，以后也不需要特别维护的场景。比如设计师用来做demo原型；前端临时做个活动页；当然如果只是为了下载图标做PPT,也是好的。

2、unicode引用

unicode是字体在网页端最原始的应用方式，特点是：兼容性最好，支持ie6+，及所有现代浏览器；支持按字体的方式去动态调整图标大小，颜色等等；但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

3、font-class引用

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。与unicode使用方式相比，具有如下特点：兼容性良好，支持ie8+，及所有现代浏览器。相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。不过因为本质上还是使用的字体，所以多色图标还是不支持的

 

秀友百科词条内容均由网友提供，仅供参考。如发现词条内容有问题，请联系管理员。