使用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对象的特性,去掉数组中的重复项

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  2. PHP之string之trim()函数使用

    trim (PHP 4, PHP 5, PHP 7) trim - Strip whitespace (or other characters) from the beginning and end ...

  3. android的计算器

    今天我闲着无聊,便想仿照Iphone的计算器自己写一个出来玩玩,于是就开动脑经,来场头脑风暴了!我拿什么了写呢?wp?这是个不错的选择,但是我最近在研究安卓的开发(求各位MSP不要烧我,我买不起MAC ...

  4. 布局xml里面所有元素详解

    被坑惨了,为了去掉一个元素,被各种莫名其妙的问题坑惨了.把所有常用到的都记录下来,不要再被坑到了 tools:context:http://blog.csdn.net/xiabing082/artic ...

  5. IOS Core Image之二

    在上篇博客IOS Core Image之一中了解了下CIImage.CIFilter.CIContext三个类的使用,这篇了解下滤镜链(多滤镜)和人脸检测(不是人脸识别). 一.多滤镜 1.有些效果不 ...

  6. 屏蔽F1~F12的快捷键的js函数

    function window.onhelp(){return false} //屏蔽F1帮助 /*keyCod从113-123分别禁用了F2-F12键,13禁用了回车键(Enter),8禁用了退格键 ...

  7. Spring.Net---4、IoC/DI注入方式

    spring.net里实现了控制反转IOC(Inversion of control),也即依赖注入DI(Dependency Injection),以达到解耦的目的,实现模块的组件化.程序在调用sp ...

  8. 十六、Condition等待通知

    一.简介 我们可以使用syncronized和wait,notify实现等待通知.而syncronized的高级实现Lock,也可以实现等待通知,需要构造Condition的实例对象. JDK文档:h ...

  9. Java基础(3)——变量

    从这篇文章起开始正式进入正题啦,本文将较为简单的介绍一下变量以及常量.变量,顾名思义,就是可以变的量,常量那么久相反了,常常不变的量就叫常量._(¦3」∠) 变量 在 Java 中,任何一个变量都得有 ...

  10. 阿里云服务器windows server流量不大的情况下,tomcat经常出现访问阻塞,手动ctrl+c或者点击右键又访问正常

    我被这个问题折磨了好几天,因为这两天要帮别人做推广,不能再出现这样的情况了,不然广告费就白烧了,所以特意查了一下资料,结果解决方案被我找出来了. 问题发生原因是因为打开编辑选项后,一不小心点到dos窗 ...