iconfont的使用

iconfont是将图片以字体的形式展示的一种方法,清晰易缩放而且文件体积小,可以直接通过修改字体颜色和大小来改变图片大小,很方便。同时也是因为这个原因只能支持纯色图片。不过对于iOS来说,减少了各种@2x、@3x的烦恼,还是很方便的。官方文档不是很详细,下面说说如何使用,希望能帮到大家少走弯路。



第一步:点击下载到本地,将文件中的字体文件(.ttf)添加到工程中;



第二步:打开Info.plist文件,增加一个新的Array类型的键,键名设置为UIAppFonts(Fonts provided by application),增加字体的文件名:“iconfont.ttf“;

第三步:使用

iconfont有两种使用方法,最常用的就是用label来展示

UILabel* label = [[UILabelalloc] initWithFrame:self.view.bounds];

UIFont*iconfont = [UIFontfontWithName:@"uxIconFont"size:34];

label.font = iconfont;

label.text = @"\U00003439 \U000035ad \U000035ae \U000035af \U000035eb \U000035ec";

label.textColor = BLACKCOLOR;

[self.view addSubview: label];

fontname就是上图中蓝色标记位置 fontfamily,text内存为 \U0000加上上图红色标记位置代码的后四位,如上图个人 text就为 \U0000e662

有的时候不能使用label,只能用imageview,比如tabbaritem,这个时候就需要把icon转换为image

+ (UIImage*)imageWithIcon:(NSString*)icon

iconColor:(UIColor*)color

iconSize:(CGFloat)size{

CGFloat scale = [UIScreen mainScreen].scale;

CGFloat realSize = size * scale;//屏幕分辨率调整图片大小

UIFont *font = [UIFont fontWithName:@"iconfont" size:realSize];

UIGraphicsBeginImageContext(CGSizeMake(realSize, realSize));//设置图片尺寸

CGContextRef context = UIGraphicsGetCurrentContext();

if ([icon respondsToSelector:@selector(drawAtPoint:withAttributes:)]) {

[icon drawAtPoint:CGPointZero withAttributes:@{NSFontAttributeName:font, NSForegroundColorAttributeName: color}];

} else {

CGContextSetFillColorWithColor(context, color.CGColor);

[icon drawAtPoint:CGPointMake(0, 0) withAttributes:@{NSFontAttributeName:font}];

}

UIImage *image = [UIImage

imageWithCGImage:UIGraphicsGetImageFromCurrentImageContext().CGImage

scale:scale orientation:UIImageOrientationUp];

UIGraphicsEndImageContext();

return image;

}

6月29日补

 如何写法没错 却一直显示问号  这个时候一般是字体文件没加载上的问题  首先检查 plist文件里有没写错单词, 然后BuildPhases--BundleResources里有无文件  如果都没问题




拖入字体文件时使用这些选项

如果还是显示问号



让让 我要放大招了


建立一个XIB\SB文件  找一个label  设置如下属性


然后再运行 就OK了





最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 什么是IconFont 所谓IconFont, 就是利用图标生成的字体。原理与汉字和emoji一样, 每一个图标对...
    Z哥阅读 1,978评论 0 51
  • 前言:写这篇文章纯粹是记录自己的使用过程以及一些疑问。iconfont之前一直是作为web页面替换按钮图片的方案,...
    安勒个安阅读 1,724评论 0 1
  • 基础环境 1.使用的矢量图标库:http://www.iconfont.cn/ 2.需要账号登陆 ,名下会有对应的...
    Dorazzz阅读 1,865评论 0 0
  • 1、登录iconfont,(阿里图标库),点开图标,选择需要的图标,添加到库里(点击购物车标志); 2、点击添加至...
    Doit的谎言阅读 1,806评论 0 0
  • 真的好累!爸爸的不争气,那么不好的身体自己却依旧不知道锻炼,你若倒下,有想过我和妈妈会多难过吗?几乎每天都被长辈们...
    海绵_a0fe阅读 141评论 0 0