iOS项目中iconfont使用指南

作者: 赛赛_lzx | 来源:发表于2016-09-12 10:43 被阅读2744次

什么是iconfont

       简单的说iconfont,从字面上就能理解它就是字体,让开发者像使用字体一样使用图标。复杂的解释,还是自己度娘吧。
       在iOS开发的时候,项目里的所有图标都是用最平常的背景图片方案来实现。而为了要兼容苹果设备的不同屏幕,苹果要求每个背景图至少都要以两种尺寸存(a@2x.png和a@3x.png有的还要求还有1x的),这让设计师们增加了成本,因为他们每次都得出两份背景图标。同时,当图片特别多的时候,很容易重命名引起麻烦,并且也很占空间,就像我们自己做的项目,很庞大,你懂得~。

使用iconfont可以解决以上问题!

如何获取iconfont?

       如果你想做一个iconfont的测试Demo,又没有UI设计师帮忙,那么你可以从阿里的图库中去自行下载来完成这个Demo。网址http://www.iconfont.cn,就和淘宝一样,登录后在它的公共资源库里任意的选择图标加入购物车,然后结账(也就是添加到自己的项目中,免费的)。

Snip20160912_2.png
       然后在图标管理中点击我的项目下载,把相应的.ttf文件下载下来。 Snip20160912_1.png

添加.ttf文件

       创建一个Demo,然后后把iconfont.ttf拖入工程中

![Snip20160912_4.png](http:https://img.haomeiwen.com/i1538778/7f243a3403e6f74e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

       然后别忘了在这里检查一下有没有?没有了手动添加进来。否则会崩!(有些文章还说再infoplist中配置,我试了一下不配置也可以)


Snip20160912_5.png

使用.ttf图标

       参考了简书中文章在iOS开发中使用iconfont图标中iconfont的使用方法,做了一个封装,代码可以通过下载Demo来获取。把TBIconFont文件夹中的6个文件拖到你工程中,就像添加三方库一样,加进来就好了。

Snip20160912_6.png
  • 在APPDelegate中添加.ttf文件(初始化)

[TBCityIconFont setFontName:@"iconfont"];

  • 程序中加载图标
- (void)viewDidLoad {
    [super viewDidLoad];

    //图标编码是&#xe600,需要转成\U0000e600

    self.testImageView.image =  [UIImage iconWithInfo:TBCityIconInfoMake(@"\U0000e600", 30, [UIColor redColor])];

    [self.testBtn setImage:[UIImage iconWithInfo:TBCityIconInfoMake(@"\U0000e605", 30, [UIColor redColor])] forState:UIControlStateNormal];

}
最终效果图

备注

Demo下载地址:https://github.com/iOSKesai/iconfontDemo.git
参考文章:在iOS开发中使用iconfont图标
                iconfont,像使用字体一样使用图标

相关文章

网友评论

  • BigBiao:xib怎么使用呢?
  • 回眸月:设置为button的背景图片显示不全,怎么处理?
  • 不超过三种颜色:请问 @“//图标编码是,需要转成\U0000e600” 这个转换是怎么做的?
    ForestL:请问我在用swift写的时候,会在"\U0000e600"报错:invalid escape sequence in literal,有什么解决办法吗?
    FingertipFish:@不超过三种颜色 如果问的是底层实现 那就不知道了
    FingertipFish:@不超过三种颜色 后四位是iconfont自动生成的 相当于图片id 前面的是iOS固定编码格式 每个端都不一样 读取方式总共有三种 可以去iconfont官网看下 使用很方便 也省内存
  • Brian木头:小清新

本文标题:iOS项目中iconfont使用指南

本文链接:https://www.haomeiwen.com/subject/dodcsttx.html