开发没切图怎么办？矢量图标（iconFont）上手指南

级别：★☆☆☆☆
标签：「iconFont」「Tool」「UIFont」
做者： 647
审校： QiShare团队

---

需求：有时候咱们本身想独立开发一些App，但苦恼没有设计给icon切图？ 这可怎么办？
今天咱们来介绍一种比较高效且高质量的替代方案：使用矢量图标 —— iconFont。

1、iconFont简介

iconFont：是阿里巴巴提供的一个矢量图标库。简单来讲，就是能够把icon转换成font，再经过文本展现出来。官网连接
支持：Web、iOS、Android平台使用。

2、iOS端简单使用指南

第一步：

登陆iconFont，挑选你须要的icon，并把它们加入购物车，下载代码。

• 挑选统一风格的icon

• 全局搜索想要的icon

• 将须要使用的icon加入到购物车

• 下载代码

第二步：

解压下载的压缩包，注意demo_index.html和iconFont.ttf文件。打开工程将ttf导入到项目中，并在info.plist中配置。

• 压缩文件，找到demo_index.html、iconFont.ttf

• 将iconFont.ttf文件导入项目：

第三步：

打开demo_index.html预览iconFont所对应的Unicode编码。并在项目中应用。

• 打开demo_index.html文件

• swift使用方法以下，用格式\u{编码}使用Unicode编码

//...
label.font = UIFont.init(name: "iconFont", size: 26.0)
label.text = "\u{e658}"
//...
复制代码

• Objective-C使用方法以下，用格式\U0000编码使用Unicode编码

//...
label.font = [UIFont fontWithName:@"uxIconFont" size: 34];;
label.text = @"\U0000e658";
//...
复制代码

这样，在没有设计提供切图的状况下，就能够用Label的iconFont字体代替切图达成ImageView的效果了。

3、iconFont原理

先把icon经过像素点描述成自定义字体（svg格式字体），而后打包成ttf格式的文件，再经过对应的unicode对应到相关的icon。

4、可能遇到的一些问题

• 多ttf文件导入冲突问题：

因为从iconFont上打包生成的ttf文件，字体名均为“iconFont”，所以从官网上下载的ttf文件，字体名均为“iconFont”。所以多ttf文件引入时，会有冲突。

解决方案：用一些工具修改字体名，再导入多个ttf文件。（记得在info.plist文件里配置）

• Unicode变化问题：

尽可能使用一个帐号下载ttf资源，不一样的环境下可能会致使生成的Unicode不一样。从而给项目替换icon带来成本。

• 版权问题：

iconFont目前应该不支持商用，除非有特别的许可。 本身独立写一些小项目的时候可使用。

---

了解更多iOS及相关新技术，请关注咱们的公众号：

小编微信：可加并拉入《QiShare技术交流群》。

关注咱们的途径有：
QiShare(简书)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公众号)

推荐文章：
DarkMode、WKWebView、苹果登陆是否必须适配？
iOS 接入 Google、Facebook 登陆（二）
iOS 接入 Google、Facebook 登陆（一）
Nginx 入门实战 iOS中的3D变换（二）
iOS中的3D变换（一）
WebSocket 双端实践（iOS/ Golang）
今天咱们来聊一聊WebSocket（iOS/Golang）
奇舞团安卓团队——aTaller
奇舞周刊