使用FontAwesome

使用FontAwesome

https://github.com/PrideChung/FontAwesomeKit

 

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

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

 

2. 使用

// 取得固定的icon以及设定尺寸
    FAKZocial *twitterIcon = [FAKZocial stackoverflowIconWithSize:50];

    // 设定相关的属性
    [twitterIcon addAttribute:NSForegroundColorAttributeName
                     value:[UIColor redColor]];

    // 在UILabel上显示
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
    label.attributedText = [twitterIcon attributedString];
    [self.view addSubview:label];
    label.center = self.view.center;

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

 

3. 高级应用

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

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

// 取得固定的icon以及设定尺寸
    FAKZocial *twitterIcon = [FAKZocial chromeIconWithSize:100];

    // 设定相关的属性
    [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()%100/100.f;
    } timeInterval:NSEC_PER_SEC];
    [_timer start];

// 取得固定的icon以及设定尺寸
    FAKZocial *twitterIcon = [FAKZocial chromeIconWithSize:100];

    // 设定相关的属性
    [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(50, 50);

    // 渐变颜色图层
    CAGradientLayer *colorLayer = [CAGradientLayer layer];
    colorLayer.bounds = CGRectMake(0, 0, 120, 120);
    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()%255/255.f
                                                  green:arc4random()%255/255.f
                                                   blue:arc4random()%255/255.f
                                                  alpha:1].CGColor,
                              (id)[UIColor colorWithRed:arc4random()%255/255.f
                                                  green:arc4random()%255/255.f
                                                   blue:arc4random()%255/255.f
                                                  alpha:1].CGColor,
                              (id)[UIColor colorWithRed:arc4random()%255/255.f
                                                  green:arc4random()%255/255.f
                                                   blue:arc4random()%255/255.f
                                                  alpha:1].CGColor,
                              (id)[UIColor colorWithRed:arc4random()%255/255.f
                                                  green:arc4random()%255/255.f
                                                   blue:arc4random()%255/255.f
                                                  alpha:1].CGColor,
                              (id)[UIColor colorWithRed:arc4random()%255/255.f
                                                  green:arc4random()%255/255.f
                                                   blue:arc4random()%255/255.f
                                                  alpha:1].CGColor];
    } timeInterval:NSEC_PER_SEC];
    [_timer start];

// 取得固定的icon以及设定尺寸
    FAKZocial *twitterIcon = [FAKZocial chromeIconWithSize:100];

    // 设定相关的属性
    [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(50, 50);

    // 渐变颜色图层
    CAGradientLayer *colorLayer = [CAGradientLayer layer];
    colorLayer.bounds = CGRectMake(0, 0, 120, 120);
    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:-2*M_PI_2 toValue:2*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()%255/255.f
                                                  green:arc4random()%255/255.f
                                                   blue:arc4random()%255/255.f
                                                  alpha:1].CGColor,
                              (id)[UIColor colorWithRed:arc4random()%255/255.f
                                                  green:arc4random()%255/255.f
                                                   blue:arc4random()%255/255.f
                                                  alpha:1].CGColor,
                              (id)[UIColor colorWithRed:arc4random()%255/255.f
                                                  green:arc4random()%255/255.f
                                                   blue:arc4random()%255/255.f
                                                  alpha:1].CGColor,
                              (id)[UIColor colorWithRed:arc4random()%255/255.f
                                                  green:arc4random()%255/255.f
                                                   blue:arc4random()%255/255.f
                                                  alpha:1].CGColor,
                              (id)[UIColor colorWithRed:arc4random()%255/255.f
                                                  green:arc4random()%255/255.f
                                                   blue:arc4random()%255/255.f
                                                  alpha:1].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];

时间: 2024-09-30 20:23:03

使用FontAwesome的相关文章

如何在PS上直接使用FONTAWESOME图标?

  估计很多前端人员都知道FontAwesome是一套免费而且好用的Web字体图标,只要在CSS引入这个字体icon,它就可以直接通过class来生成一个图标,而且免费使用.目前图标数量已经更新至585个之多,包含常用的APP UI应用图标.品牌图标等.今天教大家如何将FontAwesome直接在Photoshop或AI上使用,这样日后做UI设计也方便多了,下面我们说说方法. STEP 1:下载Fontawesome字体 官方下载地址:http://fortawesome.github.io/F

图片-font-awesome引用了,没出现,只留了一个位置?

问题描述 font-awesome引用了,没出现,只留了一个位置?

[ExtJS5学习笔记]第五节 使用fontawesome给你的extjs5应用增加字体图标

本文作者:sushengmiyan -------------------------------------------------资源链接-------------------------------------------------------- FontAwesome glyph编码:http://fortawesome.github.io/Font-Awesome/cheatsheet/ 使用图标美化按钮: http://blog.csdn.net/jfok/article/deta

Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源_php实例

这回要说的是,如何给 Yii2 项目添加外部资源(external assets),以 FontAwesome 为例子. Yii2 开始使用 composer 来做项目的依赖管理,这货是类似于 NodeJS 里面 npm 的东东,可以自动获取 Github 上最新版本的第三方库(比如 Bootstrap 啦,FontAwesome 啦之类的).按官方教程装好后,就可以开始初始化项目了. 一.初始化项目 通过 Composer 来初始化 php composer.phar create-proje

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

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

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

图标字体介绍 在介绍图标字体之前,不得不介绍图标格式ICON ICON是一种图标格式,我们操作系统中各种应用程序都包含一个图标 比如QQ程序的图标是一个可爱的企鹅,我的电脑是一个显示器图标 ---------------- 一个图标文件是扩展名为.ICO或者ICON的文件 直到现在图标文件还是在计算机程序中随处可见 但有时候需要在不失真的情况下放大图标 因为ICON本身与JPEG\PNG格式的图形文件差异不大,也是非矢量图形 所以图标文件就很难满足这种需求 ---------------- 为了

FontAwesome 4.4.0 中完整的585个图标样式CSS参考

做一记录,免得每次都去网上搜图标对应的class. 在线版本:http://dnt.dkill.net/dnt/font/  

圆环百分比

(function(a) { a.fn.circliful = function(b, d) { var c = a.extend({ fgcolor: "#556b2f", bgcolor: "#eee", fill: false, width: 15, dimension: 200, fontsize: 15, percent: 50, animationstep: 1, iconsize: "20px", iconcolor: "

如何修改安卓app图标问题

问题描述 如何修改安卓app图标问题 android:icon="@drawable/icon" 这个方法只能修改桌面图标,我想要的效果是在360手机助手上也显示修改图标 解决方案 APP 图标修改问题如何在安卓app中使用FontAwesome图标如何在安卓app中使用FontAwesome图标