一、关于 iconfont

从名字上拆分icon + font字面上大家都可以理解,其实iconfont 就是让我们可以像使用字体一样来使用图标。

使用 iconfont 的好处有:

  • 可以减少 App 的体积;
  • 图标保真缩放,可以省去 @2x@3x 图的适配;
  • 适应换肤需求,使用方便。

二、使用 iconfont

首先去 iconfont 图标库下载需求图标

阿里巴巴矢量图片库

其它选择

easyicon

fontello

icomoon

以阿里巴巴矢量图片库为例使用iconfont

1、选择图片加入购物车加入项目下载

每个图标都会对应一个unicode码和名称。 这些代码是&#xXXXX格式的,但是在 Xcode 中需要转换成\U0000XXXX格式的。

2、将 iconfont.ttf 移到工程中

下载完以后,我们会发现文件夹里包含如图二文件。我们只需要将iconfont.tff拖入工程中即可。

3、确保已经导入 iconfont.tff

为了保证iconfont.tff已导入成功,在Target--Build Phases--Bundle Resource 里检查一下。

4、添加Fonts provided by application字段

打开info.plist文件,添加Fonts provided by application字段。

三、项目中使用

简单使用

1
2
3
4
5
6
7
8
label.text = IconfontName(@"mine_logout"); // 这里的“mine_logout”就是图标的名称。
label.font = IconFontSize(64);
label.textColor = [UIColor grayColor];
label.textAlignment = NSTextAlignmentCenter;

// 如果是设置 button 的图标
[btn setTitle:IconfontName(@"chat_voice_normal") forState:(UIControlStateNormal)];
[btn setTitle:IconfontName(@"chat_voice_pressed") forState:(UIControlStateSelected)];

推荐第三方封装库:

OC:
IconFont

Swift:
EFIconFont

四、其它

推荐两个压缩图标的网站,不会影响画质,也不会变形或模糊。

Optimizilla

img.top