IconFont在iOS中的运用

IconFont技术起源于Web领域的Web Font技术。随着时间的推移,网页设计越来越漂亮。但是电脑预装的字体远远无法满足设计者的要求,于是Web Font技术诞生了。一个英文字库并不大,通过网络下载字体,完成网页的显示。有了Web Font技术,大大提升了设计师的发挥空间。(原文链接

哪里可以找IconFont

官网提供了大量的IconFont可供选择,也可以由设计师制作。地址如下:

https://www.iconfont.cn

这里还有一些其他的选择:

https://www.easyicon.net
http://fontello.com
https://icomoon.io

如何导入

如果其他自定义字体一样,导入工程的步骤如下:

  1. 将字体文件拖入项目中

  2. 在info.plist设置支持的三方字体


    plist设置
  3. 如若找不到可在工程设置Build Phases标签下的Copy Bundle Resources中查找确认,或者清理build的cache(Shift+Command+K)

如何使用

如同使用三方字体一样,iconfont可以通过fontfamily,以及对应的Unicode来使用。代码如下:

label.font = UIFont(name: "iconfont", size: 14.0)
label.text = "\u{e6e6}" // 这里的Unicode编码参照从iconfont网站导出的文件
label.textColor = .red

如果需要显示为image,使用Quarts 2D绘制然后获取上下文的图片。这里推荐使用淘点点的iOS团队完成的TBCityIconFont工具库,使用非常简单。先把库集成进入项目,再全局设置字体:

TBCityIconFont.setFontName("iconfont")

然后按照编码,字号和字色生成图片:

let info = TBCityIconInfo(text: "\u{e61a}", size: 24, color: .red)
imageView.image = UIImage.icon(with: info)

进阶使用

以上内容是查阅资料总结所得。在实际项目使用中,我发现在Interface Builder中使用iconfont极其麻烦。于是摸索出如何直接在IB中设置iconfont。

  1. 设置字体为Custom-iconfont
  2. 设置需要的字号和字色
  3. 设置文字为相应的Unicode编码

这里的第三步需要展开说明一下,由于一般输入法无法输入非官方Unicode编码的文字。我们需要使用Mac自带的Unicode输入法来输入。先把Unicode输入法开启并切换,如下:


添加Unicode输入法

需要键入相应的编码时,只需按住Option键,然后依次输入编码,生成的Unicode文字为问号图案。由于系统无法识别对应的编码,无需理会,只要把文本复制到IB中即可。这里有一点需要注意,由于键入过程可能会触发快捷键,最好在比较纯净的文本编辑器操作。
如果嫌弃键入麻烦的也可以借助如下网站生成(可能需要科学上网):

https://unicode-table.com/en/search/?q=e6ff

如果需要在IB的富文本中选择iconfont的字体,需要将字体拖入Mac的字体册(Font Book)

后记

理论上图片也是可以直接设置的,需要借助IBDesignable,这里就不展开讨论了。另外类似R.swift可以对文本进行资源管理,非常适合iconfont这种场景,由于并未实践也不展开讨论了。

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

推荐阅读更多精彩内容