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;
        }
    }
 
 
 
 
 
 
 
 
参考链接:
     
     

iconfont 图标字体的更多相关文章

  1. iOS中iconfont(图标字体)的基本使用

    前言 近日在做项目时,项目组有提出iconfont的技术,便开始查询相关资料.iconfont技术的主要目的是为减少应用体积而生.首先icon代表图标 font代表字体.此技术便是将图标转化为字体,从 ...

  2. 仿站技术——获取和使用某些网站的iconfont图标字体

    前言: 很多前端新手在仿一些大型网站的时候经常遇到一个问题:该网站使用了图标字体——iconfont,虽然现在阿里有开源的iconfont库,但是还是没有原网站的效果(本人强迫症但非处女座).所以此文 ...

  3. 微信小程序引用iconfont图标字体解决方案;

    1)首先,登录阿里巴巴iconfont.cn 2)新建项目 3)点击icon收藏 4)加入到test项目中   5)下载到本地解压   6)生成代码   7)复制iconfont.css到xxx.wx ...

  4. 图标字体(IconFont)制作

    图标字体(IconFont)介绍 图标字体(IconFont)现在越来越被广泛使用,大大提高了网页的多样化,解决了视网膜屏幕失真的问题. 据说微软从IE4开始支持的这个私有方法(@font-face) ...

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

    图标字体  iconfont 这是一种字体,它跟svg 有很大 相似点   它是矢量的,放大缩小不失真的.很且很小. 我们把它成字看来. 字体 在 从ie4就开始支持的.  兼容性很好 唯一麻烦的地方 ...

  6. CSS 小结笔记之图标字体(IconFont)

    本篇主要介绍一种非常好用的图标大法——图标字体(IconFont). 什么是图标字体?顾名思义,它是一种字体,只不过这个字体显示的并不是具体的文字之类的,而是各种图标. 网站上经常会用到各种图标,之前 ...

  7. 图标字体iconfont的使用

    什么是iconfont? iconfont就是字面上的意思,叫做"字体图标",将一套图标集以字体文件的形式封装,并通过 CSS 的 @font-face 作为 Web Font 调 ...

  8. (原创)IconFont(矢量图标字体)在Winform中的应用

    一.前言 很多时候,使用矢量图形可以带来非常美观的界面效果,比如SVG的使用.但是Winform原生是不支持显示SVG图像的,所以退而求其次,可以使用IconFont来实现相似的矢量效果. 先来个图解 ...

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

    本文介绍使用图标字体和SVG取代雪碧图的方法.雪碧图是很多网站经常用到的一种技术,但是它有缺点:高清屏会模糊.无法动态变化如hover时候反色.而使用图标字体可以完美解决上述问题,同时具备兼容性好,生 ...

随机推荐

  1. 关于unity中C#使用WaitForSeconds的方法

    //我有一段这样的代码,我要实现3秒后执行内容,JS是这样写的 function Update () { load (); } function load (){ //等待3秒执行语句 yield W ...

  2. Dos学习笔记(2)dos屏幕内容的复制

    方法1,选择复制,右键dos屏幕=>标记=>然后选择开始复制的地方,拖动覆盖要复制的内容,好了之后,按回车键(Enter). 方法2,全部复制,右键dos屏幕=>全选=>然后回 ...

  3. Sqlserver 函数

    SQL2008 表达式:是常量.变量.列或函数等与运算符的任意组合. 1. 字符串函数 函数 名称 参数 示例 说明 ascii(字符串表达式) select ascii('abc') 返回 97 返 ...

  4. pptp 之 静态路由

    上网的人总是离不开VPN,你们都懂得.以前总是买付费的VPN,慢的要死,还不便宜.于是就自己买了个国外VPS 搭建了个PPTP,超级简单.网上教程大把大把的. VPN是全局代理,上google啥的没毛 ...

  5. lua随机数函数

    function rnd(max)  --lua的第1次random数不靠谱,取第3次的靠谱  local ret=0  math.randomseed(os.time())  for i=1,3 d ...

  6. 学韩顺平老师linux教程--笔记

    第二讲:1.startx  进入图形界面2.shutdown -h now 立刻进行关机3.shutdown -r now 现在重新启动计算机4.reboot          现在重新启动计算机5. ...

  7. SQL Server 连接字符串备忘

    今天把服务器上的远程访问关了,把连接字符串中的IP地址改成了.,然后就一直连不上.弄了半天,原来是本地连接时非默认实例,不能带端口号. 1.原来的连接服务器地址是:192.168.0.1SQL2005 ...

  8. Linux监控分析实战-1

    监控概述及5个大指标 cpu mem   内存 io        磁盘交互 load     负载 Network 网络 它们之间关系是相互彼此依赖,任何一个高负载都会到导致其他指标出现问题: 网卡 ...

  9. sqlalchemy 实体属性提前加载

    在flask里需要给视图传送数据,肯定需要把模型的实体属性提前加载,可以使用 sqlalchemy.orm.subqueryload 或 sqlalchemy.orm.joinedload 示例: @ ...

  10. tomcat解决加载JSP文件过大错误

    当遇到多个Jsp include一起的时候加载时遇到如下错误: Error:SEVERE: Servlet.service() for servlet jsp threw exception org. ...