手把手教你把圖標(biāo)當(dāng)字體來用-iconfont

用iconfont和圖片比較,不需要導(dǎo)入太多的圖片,節(jié)省了空間,然后有個(gè)效果圖,用圖標(biāo)有個(gè)高亮的狀態(tài),用iconfont沒有這個(gè)狀態(tài)!自己來體會(huì)下下哇:

11.gif

首先我們來制作iconfont。
https://icomoon.io/#home 補(bǔ)充一個(gè)https://tinypng.com/
進(jìn)入后點(diǎn)擊這個(gè)
1.png

我們可以自定義導(dǎo)入想要制作的圖標(biāo)
2.png

也可以在系統(tǒng)默認(rèn)的圖標(biāo)庫里添加
3.png

加好后點(diǎn)擊下方的下載
4.png

OK,這個(gè)時(shí)候我們需要的東西就有了!點(diǎn)開文件夾,將
7.png

.ttf文件導(dǎo)入工程,然后點(diǎn)擊plist文件添加
5.png

哈哈,基本工作已經(jīng)完成了。
我們?cè)趧偛畔螺d的文件夾里找到.svg的文件,可以直接將后綴改成.XML,
每一個(gè)<glyph>標(biāo)簽對(duì)應(yīng)一個(gè)矢量圖標(biāo),包含它對(duì)應(yīng)的unicode代碼和名稱。我們就是通過這個(gè)代碼在Xcode中使用這些圖標(biāo)。這些代碼是&#xXXXX格式的,在Xcode中需要轉(zhuǎn)換成\UXXXXXXXX格式的。可以使用在線編碼工具進(jìn)行轉(zhuǎn)譯:http://tools.jb51.net/transcoding/decode_encode_tool。

//
//  ViewController.m
//  iconfont
//
//  Created by WangLe on 16/8/8.
//  Copyright ? 2016年 WangLe. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(100, 100, 100, 50)];
    label.font = [UIFont fontWithName:@"icomoon" size:35];
    label.text = @"\U0000E60f";
    label.textColor = [UIColor blueColor];
    [self.view addSubview:label];

    UIButton * btn = [UIButton buttonWithType:UIButtonTypeCustom];
    btn.frame = CGRectMake(100, 200, 100, 100);
    btn.titleLabel.font = [UIFont fontWithName:@"icomoon" size:30];
    [btn setTitle:@"\U0000E60f" forState:UIControlStateNormal];
    [btn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
    [self.view addSubview:btn];
    
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

效果圖:


6.png

哈哈,4不4很屌!
iconfont的優(yōu)點(diǎn)就是在開發(fā)過程中可以對(duì)圖標(biāo)對(duì)樣式進(jìn)行修改,不需要考慮分辨率適配啊什么@2x,@3x之類的煩雜問題。缺點(diǎn)就是若要新增圖標(biāo)的話略麻煩!不過都不是問題,把selection.json文件導(dǎo)入生成器中,然后加入你想加入的圖標(biāo),然后再生成.ttf就可以了。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 在iOS項(xiàng)目中,一般對(duì)圖片資源要求有@2x,@3x兩套,以適配不同分辨率的設(shè)備。對(duì)于有換膚需求的APP來說,還需要...
    lingxuemy閱讀 2,219評(píng)論 0 10
  • 一.iconfont使用場(chǎng)景(優(yōu)缺點(diǎn)); 一般我們項(xiàng)目決定要使用一個(gè)技術(shù)點(diǎn)前,會(huì)查相關(guān)資料對(duì)其有大概的理解。例如,...
    蕭強(qiáng)閱讀 1,967評(píng)論 1 6
  • 北方?jīng)]有通暖氣的黃昏,縮在被窩里無所事事,突然就想一個(gè)人去看安東尼的《陪安東尼度過漫長歲月》。 很久都不接觸網(wǎng)絡(luò),...
    小舟vv閱讀 704評(píng)論 7 7
  • 閨蜜發(fā)來短信說她要結(jié)婚了,我很驚訝,她和新的相親對(duì)象認(rèn)識(shí)不超過一百天,問她為什么結(jié)婚,她有些焦慮的口氣說你看那誰都...
    袁了猶閱讀 628評(píng)論 0 3
  • 你自信嗎?面對(duì)挫折、壓力、困惑、障礙時(shí),我們難免會(huì)喪失氣場(chǎng),懷疑自己的能力,但沒有真正的自信生活就沒有底氣和光亮。...
    16aa5fab5f62閱讀 518評(píng)論 0 3

友情鏈接更多精彩內(nèi)容