IconFont在APP中的使用

阿里IconFont平台

http://www.iconfont.cn/
这里是阿里巴巴UED部门开发的IconFont平台，目前阿里系的重量级产品都在使用，里面有很多资源可供使用。这里说说如何在客户端内使用。
IconFont虽然看起来是图标，实际原理跟字体的实现方式是一样的，所以我们把每个Icon当作一个特殊的文字来理解和处理。

IconFont使用

• 首先登录网站，搜索你要用的Icon，把它们加入购物车（点击就可以）。
• 把购物车里的所有Icon存储在同一个项目中。
• 进入项目，选择“下载至本地”。
• 打开下载的文件，里面有一个*.ttf文件，我们需要的所有字体就都在这里了。
• 把.ttf文件放入项目，当使用时，把TextView（Android）或UILabel（IOS）的Font设置为加载.ttf生成的自定义字体。这里有个问题，怎么指明我们要显示哪一个Icon呢？
• 下载一个字体编辑软件，我在Mac上面使用的是FontLab Studio，打开*.ttf，找到每个图标对应的Unicode值，以”\ue600”这种形式赋值给TextView（Android）或UILabel（IOS）中的文本。就可以了。

• 导入字体文件
  将字体文件拖入项目（ios支持的字体格式有：.ttf、.otf，其他格式不确定）

  
  
  

  QQ20160508-0.png

• 配置iconfont
  将.ttf文件添加到Xcode项目中去，在Build Phases配置中确保可以看到导入的文件。

  
  
  

  QQ20160508-1.png
  
  

  之后在项目的info.plist中，添加Fonts provided by application字段。这字段是一个数组，可以为项目添加多个字体集。

  
  
  

  QQ20160508-2.png

• 找到图标对应的unicode码
  使用FontLab Studio 5工具打开字体文件（比如fontello.ttf），就可以看到图标与unicode码之间的对应关系啦。

  
  
  

  QQ20160508-3.png
• 项目中使用

        let backBtn = UIButton(type: UIButtonType.Custom)
        // IconFont使用
        backBtn.titleLabel?.font = UIFont(name: "yunyou", size: 30)
//        backBtn.setTitle("", forState: .Normal)
        // Swift使用unicode码
        backBtn.setTitle("\u{E64B}", forState: .Normal)
        backBtn.titleLabel?.textAlignment = .Left
        backBtn.setTitleColor(UIColor.grayColor(), forState: .Normal)

IconFont优势

• 图标集中处理，避免重复资源，设计师只要说明Color、Size就可以了。
• 减少包大小，每个IconFont只是一小段文本，文件大小要比图片形式的icon小一个数量级。
• 节省内存，IconFont与普通文本一样是使用矢量图的方式绘制的，相比图片的内存分配方式，消耗的内存可以忽略不计了。