1265人阅读
iphone（527）
android（200）
/help/iconuse.html
在开发阿里数据iOS版客户端的时候，由于项目进度很紧，项目里的所有图标都是用最平常的背景图片方案来实现。而为了要兼容普通屏与Retina屏的设备，苹果要求每个背景图都要以两种尺寸存(a.png和a@2x.png)，这让设计师们增加了成本，因为他们每次都得出两份背景图标。
现在在web开发上，icon font技术的应用很广泛，它不仅在解决多分辨率显示问题上很有成效，而且在使用它的时候还能降低不少设计和开发成本。
那么它能不能应用到ios开发上来呢？带着这个疑问，我在github上找到了FontasticIcons和ios-fontawesome，但是这两个OC包对icon资源封装都有限，而且扩展也不是很方便。
既然能在ios上使用icon font，那么怎么用呢？经过一番摸索，发现使用原理和自定义字体差不多，只有个别操作不太一样，接下来我给大家详细介绍一下。
如何使用自定义字体
在讲icon font之前，首先先来看看普通自定义字体是如何在ios中使用的，两个原理是一样的。这里以KaushanScript-Regular为例：
Step 1: 导入字体文件
将字体文件拖入项目（ios支持的字体格式有：.ttf、.otf，其他格式不确定）：
然后再在项目的资源池中确认字体文件是否加入项目，打开xcode项目的Build Phases中查看：
Step 2: 配置.plist文件
UILabel *label5 = [[UILabel alloc] initWithFrame:CGRectMake(10, 480, 300, 50)];
label5.text = @&\U0000e42a\U00e41c&;
[self.view addSubview:label5];
7.使用自制图标字体
如果上面介绍的图标库还满足不了你的需求，或者需要的图标分布在多个图标库而不能集中到一个字体文件中；那么你可能需要自己去制作图标字体文件了。
这样，在iOS开发上，不仅可以直接去开源图标库找现成的图标用到项目中，而且还可以轻松地改变图标的颜色、大小，相信可以解放不少设计师和工程师的工作量。
图标字体库
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1813869次
积分：18796
积分：18796
排名：第302名
原创：179篇
转载：864篇
译文：44篇
评论：197条如何找到自己需要的Icon Fonts – ~SolagirL~怒赞干货！Icon-font图标字体的四类制作方法
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & 正文
Hi,我是优设小编
怒赞干货！Icon-font图标字体的四类制作方法
：因为想为公司的产品定制一套icon-font，把曾经那些不易改变不易调校大小颜色的图片改成，经过搜索和试用，发现icon-font大致有四类制作方法。这四类方法的图标生成原理是一样的，今天总结一下，希望对同学们有帮助。
FontAwesome经历了两年的进化，如今已成为不少工具性应用开发者的首选。但FontAwesome的图标毕竟有限，在某些特定的情景中，FontAwesome的字体并不能准确地传达合适的意义。为自己的Web App定制icon-font字体在某些时候就变成了一种需要。
主要步骤：
使用矢量图形编辑器设计图标，画布最好设为512px*512px。以Adobe Illustrator为例，保存为svg格式时会弹出一个svg图片属性设置对话框。这时候请按下图设置选项：
上图来自Filament Group
将svg图标文件导入Glyph字型排版工具编辑调校，生成icon-font字体文件
制作与字型编码匹配的CSS文件供网页调用。
以下介绍的四大类型的icon-font制作方法的最大分别在于第二和第三步，也就是使用什么工具编辑和生成字体的不同，及是否自动生成CSS文件的区别。本文会忽略第三步CSS文件的制作的过程，重点介绍第二步的差别和心得。
速成系 ：一步到位
在线icon-font生成器，比如icomoon.io（）或fontello（） + 自制CSS文件
icomoon的icon-font生成器界面
IcoMoon和Fontello都支持直接拖拽svg格式的图标到网页上传图标，即时在线预览不同字号的效果，批量编辑图标的CSS class名称和Unicode编码，以及下载为全套web字体及CSS文件，可谓相当方便。
倘若下载之后发现其中某个图标的名称或编码需要修改，而icon-font生成器已经被关闭，如果你需要编辑的图标不超过10个，那么恭喜你，你依然有机会在几分钟内完成图标字体的生成。但是如果需要修改的图标太多，那么这种免费的在线编辑器恐怕会成为你的噩梦。
由此可见，免费的在线图标编辑器只适合小批量快速的图标编辑，图标的质量取决于你在svg文件设计时的质量。
当然，如果你想使用在线的icon-font生成器服务于大型的图标字体项目也不是不可以。icomoon就推出了Premium付费服务，你只需注册并按使用期限付费，就可以在线保存icon-font编辑项目了。
速成系方法适合不擅长设计，想要快速获得定制图标库的开发者。
尊贵系：专业级的体验（Mac）
矢量图形编辑软件（Adobe Illustrator）+Glyphs/Glyphs Mini/FontLab + FontSquirrel WebFont Generator+ 自制CSS文件
尊贵系，顾名思义，需要花费不少银子才可以获得正版使用权。
其中的Adobe Illustrator不用多说，是矢量图形设计利器。自Adobe推出CC按月付费以来，设计师对于Adobe软件的支出便成了无底洞。虽然Affinity Designer，Sketch等众多支持矢量图形编辑的软件纷纷推出满足一次性付费的图形编辑器市场的需求。但是毕竟这些新应用或多或少还有一些Bug，稳定性短时间内难及Illustrator。当然，如果你对其他矢量图形编辑软件有信心，在这一步把Adobe Illustrator替换成其他你心仪的图标编辑软件，甚至直接使用接下来介绍的Glyphs制作亦可。
Glyphs是一套专业级的字形编辑器，完整版的价格约人民币2000元，支持直接在Glyphs里创建矢量字形。Glyphs Mini相比Glyphs主要保留了SVG导入，字体命名及字体文件导出的功能，价格约为完整版的十分之一。
全套价格不菲，如果你已是Illustrator的重度使用者，建议配合Glyphs使用。可视化的节目适合专业的师，及不愁经费的个人及团队。相比接下来要介绍的开源系，Glyphs相信在字体编辑导出的效率上会大大提高。
可用于转换字体，导出不同格式的字体文件
FontLab公司出品的一系列字体编辑转换工具与Glyphs类似，FontLab Studio也是专业级的，支持Mac和Windows平台。因为没有使用过，这里就不赘述。
使用Glyphs导出icon字体文件后，可以使用Font Squirrel网站提供的Webfont生成器（）上传由Glyphs导出的.ttf格式字体，然后选择默认的Optimal选项，最后“Download Your Kit”，生成器就会默认生成包括.eot、svg、ttf、woff、 stylesheet、css及Demo页面的文件。不过icon-font字体有时无法正常在它生成的Demo页面正常预览到。这个Font Squirrel的字体生成器会更加适合英文字体的生成和排版效果预览。
FOnt Squirrel Web Generator截图
如果你想高度定制导出的WebFont Kit的文件类型，可以选择Expert进行更多设置
开源系：尊贵系能做到的，我也可以，只是…（Windows/Linux/Mac）
InkScape + FontForge + FontSquirrel WebFont Generator
不同于尊贵系，这一系的软件全部是开源的，支持全平台。
一款开源的矢量图形编辑工具，点击菜单栏Text & Glyph即可进入字型编辑面板。不同于Illustrator只能浏览，InkScape的Glyph还可以将当前选中的图层添加到为新的Glyph。不过过程稍稍麻烦，这就是开源软件的不便之处。毕竟缺少组织性的综合产品设计规划与开发，InkScape看似功能俱全，但界面图标设计和易用性欠佳。
一款开源的字体编辑工具，在windows和Linux上上有GUI版本，在Mac上可以通过命令行安装。虽然功能上几乎接近专业级的收费软件Glyph，可以导入svg文件，编辑字体信息，调整字型样式，但是在体验上真的谈不上方便，不少操作有些繁杂，有一些明显的Bug。但它毕竟是开源的软件，并且在2014年中重新开始了开发与更新。
竹林系：搞定命令行如有轻功（Mac/Linux）
矢量图形编辑软件（Adobe Illustrator）+FontCustom命令行
Font Custom网站截图
我尝试用过两次，第一次是在几个月前，搜索icon-font制作指南时发现了放在Github上的开源项目FontCustom，但那是因为不是很明白这类基于RubyGems的工具的安装运行原理，所以没有安装成功。
第二次尝试是在今天，因为重装过Yosemite的Mac系统，于是从零开始跟着安装指南安装了RubyGems，Brewhome，FontForge。据说只要运行一句命令行，程序会自动把存有svg源文件的图标自动生成为webfonts，同时会生成css文件和HTML预览文件。
现有的一个icon-font库Ionicons的目录结构及Cheatsheet预览页面的样式就同FontCustom非常相似。他们都是基于Python的程序自动生成的。
用户可以自己在yml文件中设定模板生成参数，支持直接生成到指定路径的文件夹，或是生成scss版本等。如果掌握了FontCustom命令行生成icon-font的方法，则无需依赖在线的icon-font生成器，可以在本地意见生成icon字体和全套的页面文件。这就使得图标的修改更新和预览非常方便，也非常方便团队协作。
但没有什么是完美的。FontCustom虽然长远看来十分方便，但是如果没有命令行使用经验，要自己安装和上手是有些复杂的。
另外在安装fontCustom时用到了一个listen的package，安装时提示2.8.4的版本503错误，最后是手动安装了listen的2.8.3的版本，才得以继续FontCustom的安装。
另外fontCustom在生成文件的模板设定上还需要下一番功夫，才能让生成的文件版本、名称和结构称心如意。
以上四大类的icon-font生成方法适用于不同的项目和人群，欢迎自行挑选。尊贵系的部分软件因为没有亲自购买体验，描述全靠印象。个人目前使用icon-font的项目属于长期需要优化修改且需要团队协作的大型web应用，所以个人选择使用第四种方案，也就是FontCustom。
至于icon-font制作的第一步，也就是SVG icon设计的部分其实也是一个很有学问的步骤，尤其当icon要面对不同字体的挑战时，尤其是14px以下的字体时，有可能显示不清或是有锯齿，这就需要在图形构思方面下更多功夫。
今年最让我喜欢的icon-font库不是FontAwesome，而是Drift公司为旗下ionicFramework配套设计的icon-font Ionicons（）。今天的icon-font图标研究少不了对Ionicons 2.0的文件结构的研究。从样式上看，Ionicons或许也使用了FontCustom生成字体，不过他们高度定制了Python Script，实现了更加进阶的诸如CheatSheet生成的功能。
最后，icon-font只是用于网站图片展示的方法之一，不见得适用于所有项目，尤其是基于Marketing的小型项目，有时直接使用svg或png图片效率更高。
欢迎有兴趣的朋友参与讨论。
【优设十二月最热门的神器免费下载】
腾讯工程师出品的贴心神器！
你丫才美工倾情推荐的转矢量软件！
帮你秒存灵感图片的浏览器插件神器！
原文地址：
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量88万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
官方微信：想在手机上、被窝里获取设计教程和各种意想不到的”福利”吗？添加优设哥微信号：youshege
订阅更新：您可以通过
【推荐！设计师必备网址导航】
我们的团队
大家在关注移动端常用图标
powered by
走进网络_有我
电话_telephone97
电子邮件_email65
电子邮件_email68
电子邮件_email70
电子邮件_email71
电子邮件_email73
耳机_headphones31
房子_house128
房子_house129
附件_attachment14
附件_attachment16
复制_copy20
复制_copy21
复制_copy22
电池_battery141
电池_battery142
电话_phone348
电话_phone349
电话_phone350
电话_telephone96
更多_more14
功率_power98
功率_power99
谷歌_google114
谷歌_google115
广场_square154
广场_square158
广场_square159
广场_square162
国旗_flag49
国旗_flag50
国旗_flag51
国旗_flag54
喝_drink46
黑暗_dark54
复制_copy25
更多_more10
更多_more11
更多_more12
更多_more13
活动_play81
鸡尾酒_cocktail24
鸡尾酒_cocktail25
左_left157
黑板_blackboard8
黑板_blackboard9
黑板_blackboard10
黑板_blackboard11
黑板_blackboard12
黑色的_black375
黑色的_black379
黑色的_black381
黑色的_black382
黑色的_black385
互联网_internet35
回来_back43
回来_back45
回来_back48
回收_recycling11
活动_play79
圆形的_circular230
圆形的_circular231
圆形的_circular232
阅读_reading19
云_cloud259
占位符_placeholder19
占位符_placeholder20
照片_photo177
照片_photo182
照片_photos11
拯救_save16
注销_logout7
注销_logout8
注销_logout10
注销_logout11
最喜欢的_favorites3
圆形的_circular221
圆形的_circular223
圆形的_circular225
圆形的_circular226
信息_info21
信息_information52
选项_options
循环_recycle64
扬声器_speaker79
扬声器_speaker82
扬声器_speaker85
扬声器_speaker88
移动_mobile216
移动_mobile218
音乐_music214
音乐_music215
音乐_music216
音乐_music217
音频_audio47
音频_audio48
邮件_mail68
语音_speech98
语音_speech100
圆_circle92
下载_download143
下载_download144
下载_download145
现金_cash14
写_write18
心_heart280
心_heart281
新的_new85
文件_file63
文件_file64
文件_file65
文件_file66
文件夹_folder170
文件夹_folder171
文件夹_folder172
问题_questions1
下来_down65
下载_download140
图形_graphical9
推特_twitter43
推特_twitter44
弯曲的_curved22
添加_add151
添加_add152
添加_add153
添加_add154
投资组合_portfolio25
投资组合_portfolio26
图书馆_library12
图像_images17
图像_images19
图像_images20
图形_graphical7
文件_documents18
添加_add144
添加_add145
添加_add147
添加_add150
搜索_search75
搜索_search76
速度_speed8
速度计_speedometer29
锁定_locked33
锁定_locked35
添加_add138
添加_add140
添加_add142
添加_add143
手机_cellphone57
手机_cellphone58
书签_bookmark29
书签_bookmark30
刷新_refresh51
刷新_refresh52
水平_horizontal34
水平_horizontal35
顺时针方向_clockwise4
顺时针方向_clockwise5
手机_cellphone54
手机_cellphone56
设置_settings42
生日_birthday16
生日_birthday17
时钟_clock73
时钟_clock74
时钟_clock77
事件_event3
事件_event5
事件_event7
视频_video161
视频_video162
是的_right140
是的_right145
是的_right147
是的_right149
是的_right150
是的_right151
是的_right158
起来_up113
铅笔_pencil82
铅笔_pencil83
铅笔_pencil84
铅笔_pencil86
钱_money125
巧克力_chocolate4
清爽的_refreshing1
全球_global25
日报_daily19
三联画_triptych3
上传_upload88
上传_upload90
上传_upload93
上传_upload94
上传_upload95
片_tablet86
评论_comment43
起来_up106
美元_dollar157
美元_dollars36
明信片_postcard5
明信片_postcard6
明星_star156
逆时针_counterclockwise3
逆时针_counterclockwise4
逆时针_counterclockwise6
配置_configuration15
片_tablet78
片_tablet79
片_tablet80
片_tablet81
片_tablet82
片_tablet83
片_tablet84
片_tablet85
咖啡_coffee60
咖啡_coffee61
开的_opened26
空白_blank28
空的_empty38
框架_frame23
聊天_chat52
罗盘_compass83
罗盘_compass84
美元_dollar153
美元_dollar154
美元_dollar155
美元_dollar156
解锁_unlocked25
晶体_crystal3
静音_mute31
静音_mute33
箭头_arrow594
交叉_cross78
交叉_cross80
节约_saving3
解锁_unlocked24
救命啊_help16
几何_geometric12
计算机_computer160
监控_monitor76
减少_decrease3
剪贴板_clipboard69
剪贴板_clipboard70
键盘_keyboard48
箭头_arrow591
活动_play79
活动_play81
鸡尾酒_cocktail24
鸡尾酒_cocktail25
几何_geometric12
计算机_computer160
监控_monitor76
减少_decrease3
剪贴板_clipboard69
剪贴板_clipboard70
键盘_keyboard48
箭头_arrow591
箭头_arrow594
交叉_cross78
交叉_cross80
节约_saving3
解锁_unlocked24
解锁_unlocked25
回来_back48
回收_recycling11
黑板_blackboard9
黑板_blackboard10
黑板_blackboard11
黑板_blackboard12
黑色的_black375
黑色的_black379
黑色的_black381
黑色的_black382
黑色的_black385
互联网_internet35
回来_back43
回来_back45
广场_square162
国旗_flag49
国旗_flag50
国旗_flag51
国旗_flag54
喝_drink46
黑暗_dark54
黑板_blackboard8
复制_copy21
复制_copy22
复制_copy25
更多_more10
更多_more11
更多_more12
更多_more13
更多_more14
功率_power98
功率_power99
谷歌_google114
谷歌_google115
广场_square154
广场_square158
广场_square159
房子_house128
房子_house129
附件_attachment14
附件_attachment16
复制_copy20
登录_login11
地图_map89
电池_battery140
电池_battery141
电池_battery142
电话_phone348
电话_phone349
电话_phone350
电话_telephone96
电话_telephone97
电子邮件_email65
电子邮件_email68
电子邮件_email70
电子邮件_email71
电子邮件_email73
耳机_headphones31
蛋糕_cupcake15
的声音_voice21
的声音_voice23
登录_login10
出院_discharged1
打开_open199
打印_print33
变焦_zoom57
标签_label22
标签_label23
标签_label24
标签_tag45
玻璃_glass47
玻璃_glass48
菜单_menu42
菜单_menu45
餐厅_restaurant40
餐厅_restaurant41
餐厅_restaurant42
餐厅_restaurant43
齿轮_cogwheel23
打印机_printer78
笔记本电脑_laptop106
笔记本电脑_laptop107
报警_alarm30
本书_book186
本书_book189
比萨_pizza12
比萨_pizza13
笔记本_notebook42
笔记本_notebook43
facebook_facebook51
facebook_facebook52
Pinterest_pinterest30
Pinterest_pinterest31
按钮_button4
白板_whiteboard8
白板_whiteboard9
白板_whiteboard10
半圆的_semicircular6
半圆的_semicircular7在iOS开发中使用iconfont图标 - 简书
下载简书移动应用
写了32915字，被299人关注，获得了559个喜欢
在iOS开发中使用iconfont图标
在开发iOS项目时，不可避免的会用到图标，而为了适配不同分辨率的设备，我们通常会需要@2x，@3x两套格式的图片，最明显的就是底部tabBar的图标使用。而对于那些有换肤需求的APP来说，还需要多套图来匹配不同的主题。通过切图的方式制作图标，一方面加大了开发者和设计者的工作量，另一方面也会增大APP的体积。而使用iconfont的可以达到以下目的1.减小应用体积，字体文件比图片要小；2.图标保真缩放，解决2x/3x乃至将来nx图问题；3.方便更改图标颜色大小，图片复用。
所以为了给开发者、设计者稍微减少点工作量，给APP“减重，我们可以将iconfont应用到自己的项目中。那么，iconfont是怎么用的呢？iconfont，从字面上就能理解它就是字体，让开发者像使用字体一样使用图标。
由于我是做开发的，所以对于iconfont的制作并不太熟悉，都是设计师做好了图标给我，如果你想学习iconfont的制作的话，可以去阿里巴巴的iconfont平台去看看，上面有比较全的资料。制作好的iconfont图标是一种.ttf格式的字体，如图：
iconfont图标
iconfont中的图标是这样的：
iconfont中的图标
而我们需要的是将.ttf格式的文件引入到自己的工程中
接下来我们借助淘点点科技写的一个关于iconfont封装，方便我们使用iconfont。iconfont的封装包括
1.TBCityIconInfo.h的实现
#import &Foundation/Foundation.h&
#import &UIKit/UIKit.h&
@interface TBCityIconInfo : NSObject
@property (nonatomic, strong) NSString *
@property (nonatomic, assign) NSI
@property (nonatomic, strong) UIColor *
- (instancetype)initWithText:(NSString *)text size:(NSInteger)size color:(UIColor *)
+ (instancetype)iconInfoWithText:(NSString *)text size:(NSInteger)size color:(UIColor *)
2.TBCityFontImageInfo.m的实现
#import "TBCityIconInfo.h"
@implementation TBCityIconInfo
- (instancetype)initWithText:(NSString *)text size:(NSInteger)size color:(UIColor *)color {
if (self = [super init]) {
self.text =
self.size =
self.color =
+ (instancetype)iconInfoWithText:(NSString *)text size:(NSInteger)size color:(UIColor *)color {
return [[TBCityIconInfo alloc] initWithText:text size:size color:color];
3.TBCityIconFont.h的实现
#import "UIImage+TBCityIconFont.h"
#import "TBCityIconInfo.h"
#define TBCityIconInfoMake(text, imageSize, imageColor) [TBCityIconInfo iconInfoWithText:text size:imageSize color:imageColor]
@interface TBCityIconFont : NSObject
+ (UIFont *)fontWithSize: (CGFloat)
+ (void)setFontName:(NSString *)fontN
4.TBCityIconFont.m的实现
#import "TBCityIconFont.h"
#import &CoreText/CoreText.h&
@implementation TBCityIconFont
static NSString *_fontN
+ (void)registerFontWithURL:(NSURL *)url {
NSAssert([[NSFileManager defaultManager] fileExistsAtPath:[url path]], @"Font file doesn't exist");
CGDataProviderRef fontDataProvider = CGDataProviderCreateWithURL((__bridge CFURLRef)url);
CGFontRef newFont = CGFontCreateWithDataProvider(fontDataProvider);
CGDataProviderRelease(fontDataProvider);
CTFontManagerRegisterGraphicsFont(newFont, nil);
CGFontRelease(newFont);
+ (UIFont *)fontWithSize:(CGFloat)size {
UIFont *font = [UIFont fontWithName:[self fontName] size:size];
if (font == nil) {
NSURL *fontFileUrl = [[NSBundle mainBundle] URLForResource:[self fontName] withExtension:@"ttf"];
[self registerFontWithURL: fontFileUrl];
font = [UIFont fontWithName:[self fontName] size:size];
NSAssert(font, @"UIFont object should not be nil, check if the font file is added to the application bundle and you're using the correct font name.");
+ (void)setFontName:(NSString *)fontName {
_fontName = fontN
+ (NSString *)fontName {
return _fontName ? : @"iconfont";
5.UIImage+TBCityIconFont.h的实现
#import &UIKit/UIKit.h&
#import "TBCityIconInfo.h"
@interface UIImage (TBCityIconFont)
+ (UIImage *)iconWithInfo:(TBCityIconInfo *)
6.UIImage+TBCityIconFont.m
#import "UIImage+TBCityIconFont.h"
#import "TBCityIconFont.h"
#import &CoreText/CoreText.h&
@implementation UIImage (TBCityIconFont)
+ (UIImage *)iconWithInfo:(TBCityIconInfo *)info {
CGFloat size = info.
CGFloat scale = [UIScreen mainScreen].
CGFloat realSize = size *
UIFont *font = [TBCityIconFont fontWithSize:realSize];
UIGraphicsBeginImageContext(CGSizeMake(realSize, realSize));
CGContextRef context = UIGraphicsGetCurrentContext();
if ([info.text respondsToSelector:@selector(drawAtPoint:withAttributes:)]) {
* 如果这里抛出异常，请打开断点列表，右击All Exceptions -& Edit Breakpoint -& All修改为Objective-C
* See: /questions/1163981/how-to-add-a-breakpoint-to-objc-exception-throw/67076
[info.text drawAtPoint:CGPointZero withAttributes:@{NSFontAttributeName:font, NSForegroundColorAttributeName: info.color}];
#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Wdeprecated-declarations"
CGContextSetFillColorWithColor(context, info.color.CGColor);
[info.text drawAtPoint:CGPointMake(0, 0) withFont:font];
#pragma clang pop
UIImage *image = [UIImage imageWithCGImage:UIGraphicsGetImageFromCurrentImageContext().CGImage scale:scale orientation:UIImageOrientationUp];
UIGraphicsEndImageContext();
7.在AppDelegate.m中，初始化我们的iconfont
#import "AppDelegate.h"
#import "TBCityIconFont.h"
#import "ViewController.h"
@interface AppDelegate ()
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
//iconfont图标
[TBCityIconFont setFontName:@"iconfont"];
UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:[ViewController new]];
_window.rootViewController =
// Override point for customization after application launch.
return YES;
8.在ViewController.m中实现
#import "ViewController.h"
#import "TBCityIconFont.h"
#import "UIImage+TBCityIconFont.h"
@interface ViewController ()
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
self.navigationController.navigationBar.translucent = NO;
UIBarButtonItem *leftBarButton = [[UIBarButtonItem alloc] initWithImage:[ UIImage iconWithInfo:TBCityIconInfoMake(@"\U,[UIColor colorWithRed:0.55 green:0.55 blue:0.55 alpha:1])] style:UIBarButtonItemStylePlain target:self action:@selector(leftButtonAction)];
self.navigationItem.leftBarButtonItem = leftBarB
self.navigationItem.leftBarButtonItem.tintColor = [UIColor colorWithRed:0.55 green:0.55 blue:0.55 alpha:1];
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithImage:[UIImage iconWithInfo:TBCityIconInfoMake(@"\U0000e60d",25, [UIColor colorWithRed:0.14 green:0.61 blue:0.83 alpha:1.00])] style:UIBarButtonItemStylePlain target:self action:@selector(rightButtonAction)];
self.navigationItem.rightBarButtonItem.tintColor = [UIColor colorWithRed:0.14 green:0.61 blue:0.83 alpha:1.00];
// Do any additional setup after loading the view, typically from a nib.
-(void)loadView{
[super loadView];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(100, 50, 30, 30)];
[self.view addSubview:imageView];
//图标编码是&#xe603，需要转成\U
imageView.image = [UIImage iconWithInfo:TBCityIconInfoMake(@"\U", 30, [UIColor redColor])];
UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
button.frame = CGRectMake(100, 100, 40, 40);
[self.view addSubview:button];
[button setImage:[UIImage iconWithInfo:TBCityIconInfoMake(@"\U0000e60c", 40, [UIColor redColor])] forState:UIControlStateNormal];
label,label可以将文字与图标结合一起，直接用label的text属性将图标显示出来
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(50, 160, 280, 40)];
[self.view addSubview:label];
label.font = [UIFont fontWithName:@"iconfont" size:15];//设置label的字体
label.text = @"这是用label显示的iconfont
\U0000e60c";
-(void)leftButtonAction{
-(void)rightButtonAction{
9.运行得到的结果如图：
iconfont图标示例
这样，我们就可以很方便的使用iconfont图标了。这里要注意的是，图标是用的iconfont中的图标用的是unicode编码，我们在自己的工程中时需要将&#xXXXX格式转换成\UXXXXXXXX格式。
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
被以下专题收入，发现更多相似内容：
如果你是程序员，或者有一颗喜欢写程序的心，喜欢分享技术干货、项目经验、程序员日常囧事等等，欢迎投稿《程序员》专题。
专题主编：小...
· 165926人关注
玩转简书的第一步，从这个专题开始。
想上首页热门榜么？好内容想被更多人看到么？来投稿吧！如果被拒也不要灰心哦～入选文章会进一个队...
· 127930人关注
分享 iOS 开发的知识，解决大家遇到的问题，讨论iOS开发的前沿，欢迎大家投稿~
· 25545人关注
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
选择支付方式：}