iconFont原理:app有个特点,就是支持三方语言包,通过这个特点,我们可以把icon做成字体,注册到系统,这样我们就能通过使用文字的方式去使用icon。其实说白了,系统的字体也是图像,只是这个图像的样子是个字。
基于这个基础,地球上出现了很多类似icomoon这样把icon生成字体的应用,我们可以直接在这类应用选择icon,然后下载,也可以上传我们自己设计的icon,生成出字体icon,最后把icon文件导入应用,写上几行代码就能实现像显示文字一些样显示icon了。
这么做的好处:
1,通过icomoon生成的字体icon是矢量图,在各种屏幕上显示都不变形,无需切成@1X,@2X,@3X...这么多的图片
2,icomoon大大的缩减了我们app的大小,是瘦身的一大利器
3,操作简单,若生成icon的对应表,找icon时就不用一个个文件夹去找了
这么做的坏处:
1,图片的使用变得复杂,这么做当然比直接使用图片要复杂,新手需要学习成本
2,xib文件在UIImageView上设置image时不能直接用这个icon,那么xib到底该怎么用iconFont呢?
详细用法:
( 1 )访问 https://icomoon.io ( 2 )点击右上角 “IcoMoon App” ,会出来茫茫多的小 icon ,这个时候你选择你想要的 icon ,或者上传你自己设计的 icon ( 3 )选好 icon 之后选择右下角的 Generate Font 生成 icon 字体
( 4 )右下角可以 Download 下来这个 icon 字体集合,找到里面的 .ttf 文件,把这个文件拖到工程里面(是否每次新增加 icon 都要拖入这么一个文件)
( 5 )把下载下来的文件中的 style.css 打开,找到 icon 的名称和字符对应关系,把 icon 字符抽取出来放到工程里面供代码使用。(其实这里还有一点没说,直接下载下来的字符格式是不能直接使用的,因为iconfont注册为系统字体,在我们使用的时候要用Unicode码才能调用得到系统字体,所以我们需要转一下,转码方法是吧/e600转成/ue600,就是在e前面直接加上一个u就可以了,然后在代码里面使用/ue600就可以显示出应有的icon了)
( 6 )在 info.plist 中加上 Fonts provided by application 这个节点,下面的值就是字体 icon 的.t tf 文件名
效果图: