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