项目中使用阿里Iconfont

Iconfont 是阿里妈妈MUX倾力打造的矢量图标管理、交流平台,

设计师可以将图标上传到Iconfont平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用。

使用字体图标具有轻量、灵活、兼容性强的优点,但如果要制定自定义的字体图标库,就需要一定的维护成本,Iconfont平台正是为了降低维护字体图标库的维护成本,下面将介绍如何利用Iconfont开发管理项目中的字体图标。

1、注册

和所有项目管理平台一样,你需要先注册一个账号

项目中使用阿里Iconfont_第1张图片
注册

2、管理项目

点击主页的图标管理-我的项目

项目中使用阿里Iconfont_第2张图片
我的项目

3、新建项目

进入项目管理页,点击新建项目


项目中使用阿里Iconfont_第3张图片
新建项目

4、填写项目参数

可以设置图标class前缀,以及全局的class名。

项目中使用阿里Iconfont_第4张图片
新建项目


项目中使用阿里Iconfont_第5张图片
icon前缀
项目中使用阿里Iconfont_第6张图片
font-family

5、添加图标

往项目中添加图标的途径主要有两种:

第一种是在图标管理-我的图标中上传svg文件,然后将图标添加至购物车,最后在网页右上角点击购物车将图标添加到项目


项目中使用阿里Iconfont_第7张图片
上传


项目中使用阿里Iconfont_第8张图片
添加至购物车


项目中使用阿里Iconfont_第9张图片
添加至项目

第二种是直接在平台上搜索图标,然后添加购物车-添加至项目,当然平台上的某些图标是有版权的(小声哔哔),所以建议商用项目避免直接使用平台上的图标。


项目中使用阿里Iconfont_第10张图片
搜索
项目中使用阿里Iconfont_第11张图片
添加购物车

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_第12张图片
下载
项目中使用阿里Iconfont_第13张图片
字体文件包

iconfont.css即Font class方式所用到的文件

iconfont.js是Symbol方式用到的文件,忽略


我们把几个字体文件复制项目的fonts文件夹中

项目中使用阿里Iconfont_第14张图片
fonts

把iconfont.css引入项目


项目中使用阿里Iconfont_第15张图片
fonts.css

整合完成!是不是很简单?当然这是最基础的用法,某些譬如字体文件缓存、font-family命名的问题,可以通过自己调整,来达到最适合项目的状态。


开发环境

接下来介绍开发环境下,如何使用IconFont

开发环境下不下载文件,只需要用CDN地址即可完成整合

在项目管理页中,点击"查看在线链接",复制链接代码,直接引入css(字体文件地址也在css中)

项目中使用阿里Iconfont_第16张图片
查看在线链接


项目中使用阿里Iconfont_第17张图片
复制代码


引入font-class文件


完成~


关于IconFont使用

1、Symbol是官方最推荐的使用方式,但Font class更灵活,有许多场景仍需要用到font中的Unicode,因此这里仍然使用了Font class方式应用。

2、关于为什么要区别生产模式和开发模式,原因在于实际开发时,可能要经常微调icon,因此使用CDN是这种模式下最佳的选择。而生产模式下,需要稳定的资源,所以需要把资源down到本地。

3、IconFont支持成员协作,可以在项目管理设置中添加成员。

你可能感兴趣的:(项目中使用阿里Iconfont)