转载请注明出处:http://blog.csdn.net/wondgirl/article/details/53196384
icon font:iconfont就是把一些矢量的图标导出svg后,生成一个字体文件。
icon font优点:
1.占用体积小.
2.图标缩放不失真.
3.它就是个字体,可以任意更改颜色,阴影等.
4.多平台使用(iOS,android,web)
我的在iOS中使用iconfont的demo下载:
http://download.csdn.net/download/wondgirl/9685728
卓同学推荐的一个OC的例子.https://github.com/JohnWong/IconFont
一.icon font的制作:
1.打开http://www.iconfont.cn网址.注册并登陆.我选择的是用github账号登陆的.
2.下载http://www.sketchcn.com工具.
(破解版下载地址:http://www.pc6.com/mac/111315.html)
3.打开sketch
a.点击左上角的+,弹出下图
b.用鼠标拖拽出这个五角星
c.选择Layer---convert to outlines
d.导出为.svg文件(注意右下角选择SVG),然后点右下角的Export Star.
二.上传
1.打开登陆好的http://www.iconfont.cn,在右上角点上传.
直接把刚才导出来的star.svg上传上去.
2.当上传了多个图片后,我们可以把上传的多个icon添加到一个库文件中.
进入 我的图标 ,把鼠标移到要添加到库中的icon上面,点击上面的购物车按钮.
3.点击右下角的购物车-----添加项目.
点加入项目后面的文件夹图标,即可新件项目.
在 我的项目中,选择 下载至本地.
三.在ios中的使用
1.把刚才下载的后缀名为.ttf的文件添加到工程中.
2.打开Info.plist文件,增加一个新的Array类型的键,键名设置为UIAppFonts(Fonts provided by application),增加字体的文件名:“iconfont.ttf“
3.Unicode码的复制.
打开刚才下载的demo_unicode.html文件.
如果是代码方式使用,只复制图片下面的x后面分号前面的四部分.
这里我们复制的是e602,在代码中前面加上\U,中间用0补满8位, 为:\U0000e602.
如果是故事板的方式,直接复制图形,然后选择自己的这个字库就可以.
4.代码方式使用
// 打开Info.plist文件,增加一个新的Array类型的键,键名设置为UIAppFonts(Fonts provided by application),增加字体的文件名:“iconfont.ttf“
UILabel * label = [[UILabel alloc] initWithFrame:self.view.bounds];
//引号中写你导入进来的.ttf的名字. 和plist里添加的名字要一至.
UIFont *iconfont = [UIFont fontWithName:@"iconfont" size: 100];
label.font = iconfont;
label.text = @"\U0000e602 \U0000e603 ";//复制的Unicode码
[self.view addSubview: label];
注:文本值为 8 位的 Unicode 字符,我们可以打开 demo.html 查找每个图标所对应的 HTML 实体 Unicode 码,比如: "店" 对应的 HTML 实体 Unicode 码为:0x3439 转换后为:\U00003439 就是将 0x 替换为 \U 中间用 0 填补满长度为 8 个字符