Iconfont 是阿里妈妈MUX倾力打造的矢量图标管理、交流平台，
设计师可以将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。
使用字体图标具有轻量、灵活、兼容性强的优点，但如果要制定自定义的字体图标库，就需要一定的维护成本，Iconfont平台正是为了降低维护字体图标库的维护成本，下面将介绍如何利用Iconfont开发管理项目中的字体图标。
1、注册
和所有项目管理平台一样，你需要先注册一个账号
注册
2、管理项目
点击主页的图标管理-我的项目
我的项目
3、新建项目
进入项目管理页，点击新建项目
新建项目
4、填写项目参数
可以设置图标class前缀，以及全局的class名。
新建项目
icon前缀
font-family
5、添加图标
往项目中添加图标的途径主要有两种：
第一种是在图标管理-我的图标中上传svg文件，然后将图标添加至购物车，最后在网页右上角点击购物车将图标添加到项目
上传
添加至购物车
添加至项目
第二种是直接在平台上搜索图标，然后添加购物车-添加至项目，当然平台上的某些图标是有版权的（小声哔哔），所以建议商用项目避免直接使用平台上的图标。
搜索
添加购物车
5、项目使用
图标已经添加到了IconFont项目中了，接下来当然是要把平台上的图标整合到本地项目中来。应用图标的途径主要有三种:
Unicode、Font class、Symbol
详细内容请参考平台官网代码应用，不再赘述。这里主要说明下Unicode和Font class的区别
Unicode即编码形式的图标,也是最原始的使用方式
Unicode
Font class是Unicode的一个变体，是已经将iconfont的class定义好的一种使用方式，较Unicode更直观易用，也是较推荐的一种方式
Font class
所以下面直接介绍如何以Font class的方式在项目中使用IconFont
生产环境
首先介绍下生产环境下，如何整合IconFont
点击项目页的 "下载至本地" 按钮下载项目的字体包，其中会包含Unicode、Font class、Symbol三种使用方式的文件
下载
字体文件包
iconfont.css即Font class方式所用到的文件
iconfont.js是Symbol方式用到的文件，忽略
我们把几个字体文件复制项目的fonts文件夹中
fonts
把iconfont.css引入项目
fonts.css
整合完成！是不是很简单？当然这是最基础的用法，某些譬如字体文件缓存、font-family命名的问题，可以通过自己调整，来达到最适合项目的状态。
开发环境
接下来介绍开发环境下，如何使用IconFont
开发环境下不下载文件，只需要用CDN地址即可完成整合
在项目管理页中，点击"查看在线链接"，复制链接代码，直接引入css（字体文件地址也在css中）
查看在线链接
复制代码
引入font-class文件
完成~
关于IconFont使用
1、Symbol是官方最推荐的使用方式，但Font class更灵活，有许多场景仍需要用到font中的Unicode，因此这里仍然使用了Font class方式应用。
2、关于为什么要区别生产模式和开发模式，原因在于实际开发时，可能要经常微调icon，因此使用CDN是这种模式下最佳的选择。而生产模式下，需要稳定的资源，所以需要把资源down到本地。
3、IconFont支持成员协作，可以在项目管理设置中添加成员。
网友评论