{"id":24097391,"url":"https://github.com/johnwong/iconfont","last_synced_at":"2025-05-07T16:42:20.844Z","repository":{"id":29712633,"uuid":"33255642","full_name":"JohnWong/IconFont","owner":"JohnWong","description":"IconFont is a way to build lossless images of pure color with font file。IconFont是一种通过字体文件来构建纯色图的方案。","archived":false,"fork":false,"pushed_at":"2016-07-11T10:11:02.000Z","size":102,"stargazers_count":193,"open_issues_count":3,"forks_count":25,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-14T02:32:08.016Z","etag":null,"topics":["fontforge","icon-font","lossless-images"],"latest_commit_sha":null,"homepage":"http://johnwong.github.io/mobile/2015/04/03/using-icon-font-in-ios.html","language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JohnWong.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-04-01T15:27:00.000Z","updated_at":"2024-12-16T07:39:21.000Z","dependencies_parsed_at":"2022-09-06T08:00:41.987Z","dependency_job_id":null,"html_url":"https://github.com/JohnWong/IconFont","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JohnWong%2FIconFont","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JohnWong%2FIconFont/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JohnWong%2FIconFont/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JohnWong%2FIconFont/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JohnWong","download_url":"https://codeload.github.com/JohnWong/IconFont/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252916360,"owners_count":21824756,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fontforge","icon-font","lossless-images"],"created_at":"2025-01-10T13:44:14.227Z","updated_at":"2025-05-07T16:42:20.824Z","avatar_url":"https://github.com/JohnWong.png","language":"Objective-C","funding_links":[],"categories":[],"sub_categories":[],"readme":"# IconFont [![Pod version](https://badge.fury.io/co/IconFont.svg)](http://badge.fury.io/co/IconFont)\n\nIconFont is a way to build lossless images of pure color with font file.\n\n## 简介\n\nIconFont是一种通过字体文件来构建纯色图的方案。更详细的介绍参见[使用IconFont减小iOS应用体积](http://johnwong.github.io/mobile/2015/04/03/using-icon-font-in-ios.html)。简单说来其目的是：\n\n1. 减小应用体积，字体文件比图片要小\n1. 图标保真缩放，解决2x/3x乃至将来nx图问题\n1. 方便更改颜色大小，图片复用\n\n局限性在于只支持纯色图，但是在扁平化的今天纯色图变得越来越多。目前这套方案在点点iOS客户端上做了广泛的应用，对于应用体积压缩很有帮助。\n\n![Screenshot](http://johnwong.github.io/images/2015-04-04-iconfont-screenshot.png)\n\n## 使用指南\n\n### 安装IconFont\n\n#### 必要条件\n\nXcode 5\niOS 6.0 +\nARC enabled\nCoreText framework\n\n#### 使用CocoaPods安装\n\n添加`pod 'IconFont', '~\u003e 0.0.2'`到你项目的Podfile中。\n\n运行`pod install`或者`pod update`来安装。\n\n#### 手动安装\n\n下载源码，将IconFont目录拖到你的项目中，并添加CoreText框架到你的项目中。\n\n### 得到字体文件\n\n强烈建议用[iconfont.cn](http://iconfont.cn/)平台管理字体，资源多，易用。或者使用字体工具自行编辑字体，比如[FontForge](http://fontforge.github.io/en-US/)。如果想了解FontForge的使用，可以看我翻译的官方文档[FontForge与字体设计](http://designwithfontforge.com/zh-CN/index.html)。\n\n这里需要注意的是字体内包含的字体名要与字体文件名一致。从iconfont.cn下载的字体可能需要重命名。点击下图字体项目的`编辑项目`按钮，Font Family一栏就是字体内包含的字体名，将下载解压后的ttf文件名修改为这个字体名。当然，也可以在下载后使用FontForge工具修改ttf文件内包含的字体名。\n\n![Screenshot](http://johnwong.github.io/images/2015-04-04-iconfont-web.png)\n\n### 引用头文件\n\n在需要使用的地方引用头文件，或者在预编译pch文件中做全局引用：\n\n```objective-c\n#import \"TBCityIconFont.h\"\n```\n\n### 设置字体名称\n\n系统会默认加载字体名称LLIconfont，如果字体名不是这个，则需要在使用字体之前设置字体的名称。例如在AppDelegate的`-application:didFinishLaunchingWithOptions:`方法中添加：\n\n```objective-c\n[TBCityIconFont setFontName:@\"LLIconfont\"];\n```\n\n### 创建UIImage\n\n使用UIImage的category方法从字体创建UIImage：\n\n```objective-c\n[UIImage iconWithInfo:TBCityIconInfoMake(@\"\\U0000e601\", 24, [UIColor blackColor])]\n```\n其中`e601`图标在字体中存放的Unicode字符位。如果字体从iconfont.cn网站下载，这个值可以在页面上图标下方找到。可能更好的方法是在另一个文件中将图标预定义好，方便管理，使用的时候也更加简洁。\n\n```objective-c\n// TBCityIconDefine.h\n\n#define kTBCityIconCheck TBCityIconInfoMake(@\"\\U0000e601\", 24, [UIColor blackColor])\n```\n\n```objective-c\n[UIImage iconWithInfo:kTBCityIconAppreciate]\n```\n\n### 代码结构\n\n核心代码在工程的IconFont目录下，结构为：\n\n```\nIconFont\n├── TBCityIconFont.h\n├── TBCityIconFont.m\n├── TBCityIconInfo.h\n├── TBCityIconInfo.m\n├── UIImage+TBCityIconFont.h\n└── UIImage+TBCityIconFont.m\n└── HQFontImage.h\n└── HQFontImage.m\n```\n\n## 新的引用方式说明\n\n### 关于HQFontImage\n\nHQFontImage是扩展和加强原来的使用方式，增加字体定义，名称到图标数据映射，用文字做图片，自定义背景颜色等。\n使用时需要定义子类使用，示例工程里有，可以参考使用。\n\n### 1 获取字体文件和相应的网页文件\n\n强烈建议用[iconfont.cn](http://iconfont.cn/)平台管理字体，资源多，易用。\n下载的zip文件，包含网页样例，我们可以从网页样例转换为我们需要用的数据\n\n### 2 转换数据\n\n我们只是增加了字体映射关系，方便使用，所以需要做一次转换，iconfont.cn 官方提供这样的转换会更好。\n目前官方没有，所以可以参考这个网页小工具：\n[http://www.aslibra.com/iconFont/](http://www.aslibra.com/iconFont/)\n把demo.html用浏览器打开，按提示处理即可，官方数据格式不变的情况下可用。\n我们把官方用在css的类名作为唯一名称做映射关系。\n\n### 3 做一个HQFontImage的子类\n\n定义映射关系或者自定义字体文件，上面提供的网页可以方便得到下面的数据\n\n```objective-c\n+ (NSDictionary*)IconDictionary\n{\n    return @{\n             @\"delete\":@\"\\U0000e610\", // 删除\n             @\"shezhi\":@\"\\U0000e60f\", // 设置\n             @\"order\":@\"\\U0000e600\", // order\n             @\"jikediancanicon02\":@\"\\U0000e601\", // 订单\n             @\"yinleyinpin\":@\"\\U0000e602\", // 音乐音频\n             @\"luyin\":@\"\\U0000e603\", // 录音\n             @\"tianjia\":@\"\\U0000e604\", // 添加\n             @\"dingdan\":@\"\\U0000e605\", // 订单\n             @\"tianjia1\":@\"\\U0000e606\", // 添加\n             @\"shezhi1\":@\"\\U0000e611\", // 设置\n             @\"8080pxtubiaokuozhan100\":@\"\\U0000e615\", // stop\n             @\"socialconnect\":@\"\\U0000e612\", // social-connect\n             @\"record\":@\"\\U0000e616\", // record\n             @\"bookaskicon1417\":@\"\\U0000e607\", // setting\n             @\"tixing\":@\"\\U0000e608\", // 提醒\n             @\"iconmenubarorder\":@\"\\U0000e609\", // order\n             @\"wifi\":@\"\\U0000e60a\", // WIFI\n             @\"shezhi2\":@\"\\U0000e60b\", // 设置\n             @\"gerenzhongxin01\":@\"\\U0000e60c\", // 个人中心 \n             @\"group\":@\"\\U0000e613\", // Group \n             @\"help\":@\"\\U0000e614\", // help \n             @\"play\":@\"\\U0000e617\", // play \n             @\"tixing1\":@\"\\U0000e60d\", // 提醒 \n             @\"yuyin\":@\"\\U0000e60e\", // 语音 \n             @\"\":@\"\"};\n}\n\n//单独定义一个字体文件，方便管理多个字体库\n+ (NSString*)fontName\n{\n    return @\"iconfont\";\n}\n```\n\n### 4 使用示例\n\n引用自定义的子类文件\n```objective-c\n#import \"HQFontImageDictionary.h\"\n#import \"HQFontImageList.h\"\n```\n\n使用图片\n```objective-c\n    //使用名字的方式引用\n    _appreciateIcon.image = [HQFontImageDictionary iconWithName:@\"pause\" fontSize:48 color:[UIColor redColor] inset:UIEdgeInsetsMake(10, 10, 10, 10)];\n    _checkIcon.image = [HQFontImageDictionary iconWithName:@\"pause\" fontSize:48 color:[UIColor blueColor] padding:0.3 withBackgroundColor:[UIColor yellowColor]];\n    _closeIcon.image = [HQFontImageDictionary iconWithName:@\"汉\" fontSize:48 color:[UIColor redColor]];\n    //自定义，但两个字体会有上下偏移不同，不知道是否字体文件问题\n    _editIcon.image = [HQFontImageList iconWithName:@\"汉\" fontSize:48 color:[UIColor redColor]];\n    _emojiIcon.image = [HQFontImageDictionary iconWithName:@\"pause\" fontSize:48 color:[UIColor redColor] withBackgroundColor:[UIColor blackColor]];\n```\n\n![Screenshot](https://raw.githubusercontent.com/hqlulu/hqlulu.github.io/master/static/iconFont2.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnwong%2Ficonfont","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohnwong%2Ficonfont","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnwong%2Ficonfont/lists"}