iconFont 使用笔记

" .svg" , "iconFont" 这样的词汇在网页开发中经常用到,其实,在APP的原生开发中,它也可以拳脚大施

1. iconFont的自我介绍

iconFont是图标字体, 顾名思义,就是把图标从图片转化为字体, 以自定义字体的方式使用.

什么是SVG?
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准
此处参考: http://www.w3school.com.cn/html5/html_5_svg.asp

使用.png 图片进行渲染,为了适配不同的设备,我们需要准备两套图片@2x.png, @3x.png, 如果需要不同的状态如: normal(常规), hightLight(高亮), unable(不可操作) 等则需要 2 * n张图片, 不仅增加了UI人员工作量, 也增加了APP包的大小。

举个例子:

  • a. 使用11个图标(包含@2x.png, @3x.png)一共139k
72B9E4A6-CF13-4AE3-9763-9CAE55E6CB20.png
  • b.使用11个图标生成的字体占用空间4k
F5ED11B6-0ADE-48A4-A00F-AB46AE8F6985.png
*当前是139k与4k的区别,当图标的量越大, 同一图标状态越多,此差距就会越明显
2. 使用指南
1). 使用.svg矢量图标 生成图标字体

打开网页https://icomoon.io/app/#/select, 点击Import Icons

C3F18E04-7CC7-407D-91B7-ED0E48085794.png

可以看到生成的图标:

F1248736-4765-4B3E-8B6B-75D8C290DC92.png
2). 导出字体

(1)点击右下角的Generate Font生成font

876DA01C-86C8-4282-90FF-1D81B78BBEB7.png

(2)点击Download下载生成的font 字体

2E64FF59-563A-48A4-8E4D-30712A67FA0D.png

上图中标识的 1 是 图标的模样 ;2 e900是图标生成的字体的名字

下载的字体库如下:

894BDC98-185B-4DF2-B700-C605F4B48C17.png
3). 导入工程

将icomoon.ttf导入工程中, 并配置plist文件, 导入字体库,如下图:

48904081-4F9B-4345-BB15-3E5C0102F10B.png
4). 使用

(1)使用方式, 跟文字同, 可以设置大小, 设置颜色
效果如下:

FE7C7BC9-DD04-4FBD-9E4D-9A9B52456D57.png

(2)代码

label1.font = UIFont.init(name: "icomoon", size: 20)
label1.textColor = UIColor.red
label1.text =  "\u{e900}"
        
label2.font = UIFont.init(name: "icomoon", size: 24)
label2.text = "\u{e903}"
        
label3.font = UIFont.init(name: "icomoon", size: 30)
label3.textColor = UIColor.blue
label3.text = "\u{e907}"
        
label4.font = UIFont.init(name: "icomoon", size: 40)
label4.textColor = UIColor.green
label4.text = "\u{e908}"

此为swift中用法 "\u{e908}"
OC 中用法 @"\U0000e908"


以上仅是个人使用总结,欢迎批评指正补充~~~~~~~

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

推荐阅读更多精彩内容

  • 一.iconfont使用场景(优缺点); 一般我们项目决定要使用一个技术点前,会查相关资料对其有大概的理解。例如,...
    萧强阅读 1,590评论 1 6
  • 什么是Iconfont 我们通常看到的图标都是以图片形式集成到项目中使用,而 Iconfont 是一套字体图标,和...
    十秒_阅读 3,334评论 1 14
  • 首先说明,我是web前端开发的新手,高手忽喷!。最近开发一个微信商城,要用到很多图标,之前我都是用@×2雪碧图。但...
    Cola丶ZYQ阅读 2,166评论 1 2
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,615评论 0 7
  • 之前发表过一篇关于iconfont图标字体的相关教程,以文字的方式,实现网页中的图标和特殊字符。教程链接可参考:h...
    小码哥教育520it阅读 23,034评论 0 12