项目中使用阿里Iconfont

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支持成员协作,可以在项目管理设置中添加成员。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容