使用FontAwesome

https://github.com/PrideChung/FontAwesomeKit

为什么要使用FontAwesome呢,其实,它的字体就是矢量图,无论是放大还是缩小都不失真的矢量图哦.

1. 下载源码,导入文件夹FontAwesomeKit,然后引入头文件FontAwesomeKit.h

2. 使用

    // 取得固定的icon以及设定尺寸
FAKZocial *twitterIcon = [FAKZocial stackoverflowIconWithSize:]; // 设定相关的属性
[twitterIcon addAttribute:NSForegroundColorAttributeName
value:[UIColor redColor]]; // 在UILabel上显示
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(, , , )];
label.attributedText = [twitterIcon attributedString];
[self.view addSubview:label];
label.center = self.view.center;

使用是非常简单的哦,效果如下:

3. 高级应用

你以为就显示出来就没了么?非也,你想过把字体转换为路径么,转换为路径后就可以执行各种CoreAnimation的动画了呢:)

先来试一下CAshapeLayer的动画路径:

    // 取得固定的icon以及设定尺寸
FAKZocial *twitterIcon = [FAKZocial chromeIconWithSize:]; // 设定相关的属性
[twitterIcon addAttribute:NSForegroundColorAttributeName
value:[UIColor blackColor]]; // 将icon转换为贝塞尔曲线
UIBezierPath *path = [UIBezierPath pathFromAttributedString:[twitterIcon attributedString]]; // 创建shapeLayer
CAShapeLayer *shapeLayer = [CAShapeLayer layer]; // 获取path
shapeLayer.path = path.CGPath; // 根据这个path来设定尺寸
shapeLayer.bounds = CGPathGetBoundingBox(shapeLayer.path); // 几何反转
shapeLayer.geometryFlipped = YES; // 一些颜色的填充
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.strokeColor = [UIColor cyanColor].CGColor; // 设定layer位置
shapeLayer.position = self.view.center;
[self.view.layer addSublayer:shapeLayer]; // 定时器动画
_timer = [[GCDTimer alloc] initInQueue:[GCDQueue mainQueue]];
[_timer event:^{
shapeLayer.strokeEnd = arc4random()%/.f;
} timeInterval:NSEC_PER_SEC];
[_timer start];

    // 取得固定的icon以及设定尺寸
FAKZocial *twitterIcon = [FAKZocial chromeIconWithSize:]; // 设定相关的属性
[twitterIcon addAttribute:NSForegroundColorAttributeName
value:[UIColor blackColor]]; // 将icon转换为贝塞尔曲线
UIBezierPath *path = [UIBezierPath pathFromAttributedString:[twitterIcon attributedString]]; // 创建shapeLayer
CAShapeLayer *shapeLayer = [CAShapeLayer layer]; // 获取path
shapeLayer.path = path.CGPath; // 根据这个path来设定尺寸
shapeLayer.bounds = CGPathGetBoundingBox(shapeLayer.path); // 几何反转
shapeLayer.geometryFlipped = YES; // 一些颜色的填充
shapeLayer.fillColor = [UIColor blackColor].CGColor;
shapeLayer.strokeColor = [UIColor clearColor].CGColor;
shapeLayer.position = CGPointMake(, ); // 渐变颜色图层
CAGradientLayer *colorLayer = [CAGradientLayer layer];
colorLayer.bounds = CGRectMake(, , , );
colorLayer.mask = shapeLayer;
colorLayer.colors = @[(id)[UIColor redColor].CGColor,
(id)[UIColor greenColor].CGColor,
(id)[UIColor yellowColor].CGColor];
colorLayer.position = self.view.center; // 设定layer位置
[self.view.layer addSublayer:colorLayer]; // 定时器动画
_timer = [[GCDTimer alloc] initInQueue:[GCDQueue mainQueue]];
[_timer event:^{
colorLayer.speed = 0.5;
colorLayer.colors = @[(id)[UIColor colorWithRed:arc4random()%/.f
green:arc4random()%/.f
blue:arc4random()%/.f
alpha:].CGColor,
(id)[UIColor colorWithRed:arc4random()%/.f
green:arc4random()%/.f
blue:arc4random()%/.f
alpha:].CGColor,
(id)[UIColor colorWithRed:arc4random()%/.f
green:arc4random()%/.f
blue:arc4random()%/.f
alpha:].CGColor,
(id)[UIColor colorWithRed:arc4random()%/.f
green:arc4random()%/.f
blue:arc4random()%/.f
alpha:].CGColor,
(id)[UIColor colorWithRed:arc4random()%/.f
green:arc4random()%/.f
blue:arc4random()%/.f
alpha:].CGColor];
} timeInterval:NSEC_PER_SEC];
[_timer start];

    // 取得固定的icon以及设定尺寸
FAKZocial *twitterIcon = [FAKZocial chromeIconWithSize:]; // 设定相关的属性
[twitterIcon addAttribute:NSForegroundColorAttributeName
value:[UIColor blackColor]]; // 将icon转换为贝塞尔曲线
UIBezierPath *path = [UIBezierPath pathFromAttributedString:[twitterIcon attributedString]]; // 创建shapeLayer
CAShapeLayer *shapeLayer = [CAShapeLayer layer]; // 获取path
shapeLayer.path = path.CGPath; // 根据这个path来设定尺寸
shapeLayer.bounds = CGPathGetBoundingBox(shapeLayer.path); // 几何反转
shapeLayer.geometryFlipped = YES; // 一些颜色的填充
shapeLayer.fillColor = [UIColor redColor].CGColor;
shapeLayer.strokeColor = [UIColor clearColor].CGColor;
shapeLayer.position = CGPointMake(, ); // 渐变颜色图层
CAGradientLayer *colorLayer = [CAGradientLayer layer];
colorLayer.bounds = CGRectMake(, , , );
colorLayer.mask = shapeLayer;
colorLayer.colors = @[(id)[UIColor redColor].CGColor,
(id)[UIColor greenColor].CGColor,
(id)[UIColor yellowColor].CGColor];
colorLayer.position = self.view.center; // 设定layer位置
[self.view.layer addSublayer:colorLayer]; // 旋转
CABasicAnimation *basicAni = \
[CABasicAnimationList animationWithRotationZFromValue:-*M_PI_2 toValue:*M_PI_2];
basicAni.duration = 1.0f;
basicAni.repeatCount = HUGE_VALF;
[shapeLayer addAnimation:basicAni forKey:nil]; // 定时器动画
_timer = [[GCDTimer alloc] initInQueue:[GCDQueue mainQueue]];
[_timer event:^{
colorLayer.colors = @[(id)[UIColor colorWithRed:arc4random()%/.f
green:arc4random()%/.f
blue:arc4random()%/.f
alpha:].CGColor,
(id)[UIColor colorWithRed:arc4random()%/.f
green:arc4random()%/.f
blue:arc4random()%/.f
alpha:].CGColor,
(id)[UIColor colorWithRed:arc4random()%/.f
green:arc4random()%/.f
blue:arc4random()%/.f
alpha:].CGColor,
(id)[UIColor colorWithRed:arc4random()%/.f
green:arc4random()%/.f
blue:arc4random()%/.f
alpha:].CGColor,
(id)[UIColor colorWithRed:arc4random()%/.f
green:arc4random()%/.f
blue:arc4random()%/.f
alpha:].CGColor]; } timeInterval:NSEC_PER_SEC];
[_timer start];

附录:

FAKFontAwesome *starIcon = [FAKFontAwesome asteriskIconWithSize:50];
    FAKFoundationIcons *bookmarkIcon = [FAKFoundationIcons bookmarkIconWithSize:15];
    FAKZocial *twitterIcon = [FAKZocial twitterIconWithSize:15];
    FAKIonIcons *mailIcon = [FAKIonIcons ios7EmailIconWithSize:48];

使用FontAwesome的更多相关文章

  1. 【三石jQuery视频教程】02.创建 FontAwesome 复选框和单选框

    视频地址:http://v.qq.com/page/m/8/c/m0150izlt8c.html 大家好,欢迎来到[三石jQuery视频教程],我是您的老朋友 - 三生石上. 今天,我们要通过基本的H ...

  2. 直接在 CSS 中引用 FONTAWESOME 图标(附码表)

    直接在 CSS 中引用 FONTAWESOME 图标(附码表) 因此我们如果不想用 Fontawesome 提供的类,只想在 css 里面引用图标的话,可以这样子,请自行脑补: .icon:befor ...

  3. 学习WPF——使用Font-Awesome图标字体

    图标字体介绍 在介绍图标字体之前,不得不介绍图标格式ICON ICON是一种图标格式,我们操作系统中各种应用程序都包含一个图标 比如QQ程序的图标是一个可爱的企鹅,我的电脑是一个显示器图标 ----- ...

  4. 利用PhotoShop将Font-Awesome转为图片格式

    介绍如何将Font-Awesome等字体图标转换为图片格式,使用PHOTPSHOP很简单. 网上找了很多,都比较麻烦.别问为什么要这么做,因为你还没遇到需要的时候. 下载Font-Awesome字体库 ...

  5. 用fontAwesome代替网页icon小图标

    1. 引言 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋.下面的小图标,你是不是会经常用到? 你可能说——“我们用的都是彩色的,不是黑白的”——别着急,下面会讲 ...

  6. IconFont和FontAwesome的区别?

    一.[Iconfont] Iconfont支持所有低版本浏览器: Iconfont的图标库更大: Iconfont可以用自己上传的svg,但是要花费大量时间和耐心去设计AI图标: Iconfont的使 ...

  7. 分享我用Qt开发的应用程序【二】在Qt应用程序中使用字体图标fontawesome

    为了使用简单,需要先写一个单件类,头文件的代码如下: 其中静态方法Instance保证IconHelper的实例全局唯一 (注意构造函数已经私有化了) #ifndefICONHELPER_H #def ...

  8. Adobe Illustrator里使用fontawesome矢量图标

     简单教程:1.安装FontAwesome.otf字体2.打开http://fontawesome.io/cheatsheet/3.选中图标图片,ctrl+c4.粘贴到AI中5.选中粘贴的内容,修改字 ...

  9. 请用fontAwesome代替网页icon小图标

    1. 引言 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋.下面的小图标,你是不是会经常用到? 你可能说——“我们用的都是彩色的,不是黑白的”——别着急,下面会讲 ...

  10. fontAwesome代替网页icon小图标

    引言 奥森图标(Font Awesome)提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ,颜色,阴影. 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常 ...

随机推荐

  1. JS写游戏

    最近在看萧井陌的视频.感觉一些东西挺有意思的,尤其是解决问题的过程,以及一个好程序应该改进的地方. 萧大的GITHUB:github.com/guaxiao/gua.game.js 视频:https: ...

  2. HUE配置文件hue.ini 的pig模块详解(图文详解)(分HA集群和非HA集群)

    不多说,直接上干货! 一.默认的pig配置文件 ########################################################################### ...

  3. Java Servelet

    1.服务器端运行的程序 2.Servelet三个方法 init service 抽象方法 destory 这三个方法构成了servelet的生命周期 3.步骤 1.在web.xml中 描述了servl ...

  4. PTA (Advanced Level) 1010 Radix

    Radix Given a pair of positive integers, for example, 6 and 110, can this equation 6 = 110 be true? ...

  5. SpringCloud - 2. 服务注册 和 发现

    SpringCloud 的服务注册和发现是由Eureka来完成. 1.eureka server 1.1 依赖 <dependency> <groupId>org.spring ...

  6. JQuery ajax-向服务器发送请求的方法

    如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法: xmlhttp.open("GET","ajax_info ...

  7. SQL Serever学习15——进阶

    特别说明:在sqlserver2014中,不区分大小写,也就是说,SQL是大小写不敏感的 数据库模型3类: 层次模型 网状模型 关系模型 关系型数据库语言3种: DDL数据定义语言 CREATE(创建 ...

  8. SQL Serever学习7——数据表2

    修改数据表的属性 保存数据表的修改的时候,总会弹出阻止修改的警告. 解决方法2种: 1.可以使用T-sql语句强行修改 2.工具>选项>设计器>表设计器和数据库设计器>阻止保存 ...

  9. 十、获取异步线程返回值Callable

    一.简介 异步线程的实现接口Runnable是无法获得返回结果的,而另一个接口Callable可以返回结果.并通过如Future等方式来获取异步结果. 二.代码示例 import java.util. ...

  10. Struts2 (三) — OGNL与值栈

    一.OGNL表达式 1.概述 1.1什么是OGNL ​ OGNL是Object-Graph Navigation Language的缩写,俗称对象图导航语言. 它是一种功能强大的表达式语言,通过它简单 ...