iconfont 图标字体

 iconfont 技术的主要是将图标转化为字体来减少应用体积。如需在项目中使用iconfont技术,图标矢量图一开始都应合并转化为字体库。

优点:

  • 减小体积,字体文件比图片要小
  • 图标保真缩放,解决2x/3x乃至将来的nx图问题
  • 方便更改颜色大小,图片复用

缺点:

  • 只适用于纯色icon
  • 使用unicode字符难以理解
  • 需要维护字体库

字体管理

字体管理方式分为两种:在线管理(iconfont.cn)和FontForge工具。

 

字体库生成

这里推荐两个比较好用的网站iconmoon和iconfon,个人在做网页的时候,经常会在iconmoon上制作字体图标。如果设计师给你了字体库最好,如果给你的是 .svg 文件,就需要自己去转为字体库了。这里以iconmoon为例制作字体库,iconmoon需要FQ。

1、导入设计师给的 .svg 文件

2、点击Generate Font 生成字体库,如下图

3、打开下载的文件夹,如下图

4、将.ttf 的字体库,导入项目中,要确保在下图路径中可以看到字体库

5、在plist文件中,添加字段Fonts provided by application并在该字段下添加GWH_search.ttf。工程中便可使用字体库了。

6、打开demo.html,可以看到图标字体的Unicode编码

使用的时候只需要将图标对应的Unicode编码转化为text字符串即可,转化方式’\U0000 + 对应编码’

示例:

  • [_textLabelfontWithIcon:@"\U0000e900"size:14color:[UIColorredColor]];

    UIImageView *imgV = [[UIImageViewalloc] initWithFrame:CGRectMake(100, 100, 30, 30)];
    [imgV setImage:kImageFont(@"\U0000e900", 17, [UIColorgreenColor])];
    [self.viewaddSubview:imgV];

    UIButton *iconBtn = [[UIButtonalloc] initWithFrame:CGRectMake(100, 150, 30, 30)];
    [iconBtn setTitleWithIcon:@"\U0000e900"size:14color:[UIColormagentaColor]];
    [self.viewaddSubview:iconBtn];

效果:

分类:

UIImage+IconFont.m

  • + (UIImage *)imageWithIcon:(NSString *)iconCode size:(NSUInteger)size color:(UIColor *)color {
        CGSize imageSize = CGSizeMake(size, size);
        // opaque:NO 不透明
        UIGraphicsBeginImageContextWithOptions(imageSize, NO, [[UIScreenmainScreen] scale]);
        UILabel *label = [[UILabelalloc] initWithFrame:CGRectMake(0, 0, size, size)];
        label.font = [UIFontfontWithName:@"GWH_search"size:size];
        label.text = iconCode;
        if(color){
            label.textColor = color;
        }
        [label setNumberOfLines:0];
        label.textAlignment = NSTextAlignmentCenter;
        // 渲染自身
        [label.layerrenderInContext:UIGraphicsGetCurrentContext()];
        UIImage *retImage = [UIGraphicsGetImageFromCurrentImageContext() imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
        UIGraphicsEndImageContext();
        return retImage;
    }

UIButton+IconFont.m

  • - (void)setTitleWithIcon:(NSString *)iconCode size:(NSInteger)size color:(UIColor *)color {
        [selfsetTitle:iconCode forState:UIControlStateNormal];
        self.titleLabel.font = [UIFontfontWithName:@"GWH_search"size:size];
        if (color) {
            [selfsetTitleColor:color forState:UIControlStateNormal];
        }
    }

UILabel+IconFont.m

  • - (void)fontWithIcon:(NSString *)iconCode size:(NSInteger)size color:(UIColor *)color {
        self.font = [UIFontfontWithName:@"GWH_search"size:size];
        self.text = iconCode;
        if (color) {
            self.textColor = color;
        }
    }

参考链接:

http://johnwong.github.io/mobile/2015/04/03/using-icon-font-in-ios.html

时间: 2024-12-11 04:34:45

iconfont 图标字体的相关文章

如何在项目中使用icon-font 图标字体

icon-font 图标字体的使用, 方法一:可以在icomoon下载相应的图表字体,官网为:https://icomoon.io/ ? 进去会提供600+的免费图表,如果想要更多的图表字体可选择Icon Library:如图所示: 选择好需要的图标后点击右下角的Generate Font生成图标,生成后download下来,下载好的文件会包含fonts文件夹和css文件.demo.html文件,把fonts文件夹和css文件引入到项目中,css文件需要根据项目路径做相应的字体路径更改,然后在你

CSS高级技巧 图标字体ICONFONT的使用方法视频

图标字体  iconfont 这是一种字体,它跟svg 有很大 相似点   它是矢量的,放大缩小不失真的.很且很小. 我们把它成字看来. 字体 在 从ie4就开始支持的.  兼容性很好 唯一麻烦的地方,就是制作麻烦. 越来越的网站开始运用这个图标字体. 一些地方,我们就不用精灵图片,直接用图标字体. 图标字体的使用 自己制作比较麻烦,我们一般是网上直接下载,因此,要使用iconfont字体一共分为三步: 1. 先从网上下载字体.     经常使用的两个网站: icomoon.io http://

基于svg生成iconfont矢量字体图标

对于前端开发,图标是前端页面不可缺少的元素,他能更让前端页面更加丰富.前端页面的初期都是使用图片,对于小的图标使用图片拼成雪碧图不仅影响前端开发的效率,而且图片文件相对较大也会影响网页加载的速度.ionfont字体图标相较于图片他的优势就是文件大小极小,几百个图标才几十上百kb,但是换成图片可能已经有几mb了,其次制作简单,只需UI提供svg图标可以通过工具自动生成字体文件,或者网上有很多免费的图标库可以自动生成矢量字体文件,例如阿里巴巴矢量字体库.但是iconfont字体图标因为他就像字体一样

图标字体化浅谈[转]

在做手机端Web App项目中,经常会遇到小图标在手机上显示比较模糊的问题,经过实践发现了一种比较好的解决方案,图标字体化.在微社区项目中,有很多小的Icon(图标),如分享.回复.赞.返回.话题.访问.箭头等,这些Icon(图标)一般都是纯色的.开始制作时考虑用双倍大小的Sprite图,通过CSS样式设置只显示二分之一尺寸,这样在Retina屏上显示的大小是正常的,一旦放大屏幕后图标又变得模糊不清,测试的效果不是很理想,后来又考虑多套图标适配方案.SVG矢量图等,都因为种种原因放弃掉了(如多套

图标字体使用方法总结

使用图标字体可以解决网站中大量的小图标问题,真的很好用,值得收藏,下面介绍图标字体的使用方法: 首先,进入这个网站:http://www.iconfont.cn   选择自己需要的图标 使用图标字体有三种方法: 这三种放的使用方式大致相同. 第一种是:unicode引用: 第二种是:font-class引用 第三种是:symbol引用:

图标字体 VS 雪碧图——图标字体应用实践

本文介绍使用图标字体和SVG取代雪碧图的方法.雪碧图是很多网站经常用到的一种技术,但是它有缺点:高清屏会模糊.无法动态变化如hover时候反色.而使用图标字体可以完美解决上述问题,同时具备兼容性好,生成的文件小等优点. 雪碧图 雪碧图实例:淘宝PC端 将多张小图放至一张大图 使用的时候,通过background-position调整显示的位置,如下图所示: 雪碧图的使用方法 使用雪碧图唯一的优点,可以说就是减少浏览器的请求次数.因为浏览器同一时间能够加载的资源数是一定的,IE 8是6个,Chro

图标字体使用方法

一:图标字体特点 兼容性好(从IE4 开始支持). 一定程度会替代精灵图. 只能是纯色不能加渐变,简约. 本身是一个字,修改方便.(用font和color属性可以直接修改). 加在速度快. 也可自己制作. 二.图标字体使用方法 1.上阿里巴巴字体库(iconfont.cn)下载需要的图标加入购物车一键下载.下载完文件夹中有以下几个文件.把黄色区域中的四个文件拷贝到站点目录下的font(自己建立)文件夹下.(四个文件夹为了兼容不同浏览器) 2.打开demo.html拷贝以下一段话到html文件中

图标字体化浅谈

在做手机端Web App项目中,经常会遇到小图标在手机上显示比较模糊的问题,经过实践发现了一种比较好的解决方案,图标字体化.在微社区项目中,有很多小的Icon(图标),如分享.回复.赞.返回.话题.访问.箭头等,这些Icon(图标)一般都是纯色的.开始制作时考虑用双倍大小的Sprite图,通过CSS样式设置只显示二分之一尺寸,这样在Retina屏上显示的大小是正常的,一旦放大屏幕后图标又变得模糊不清,测试的效果不是很理想,后来又考虑多套图标适配方案.SVG矢量图等,都因为种种原因放弃掉了(如多套

图标字体的使用

图标字体的使用 1. 什么是图标字体 图标字体是字体文件,用符号和字形的轮廓代替标准的文字数字式字符.是专门为用户界面设计,就像系统字体一样,使用CSS@font-face在web浏览器里展示.使用图标字体来生成图标相对于基于图片的图标来说,有如下的好处: 1.自由的变化大小 2.自由的修改颜色 3.添加阴影效果 4.IE6也可以支持 5.支持图片图标的其它属性,例如,透明度和旋转等等 2. 如何使用图标字体? 要想使用图标字体,首先我们要有图标字体文件,我们以IcoMoon(http://ic