Font Awesome

時間 2019-12-07

標籤 font awesome 简体版

原文原文鏈接

首先,先介紹一下FontAwesome。 css

Font Awesome 是爲 Twitter Bootstrap 設計的圖標字體。經過Web Font的方式來顯示一些圖標，好處是圖標能夠被任意縮放、改變顏色，你須要作的只是像修改文字樣式那樣修改圖標樣式。 html

< 喎�"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcD4KCgoKCgoKCgoKPGJyPgrV4sDvvs24+LP2wcvSu9Cpzbyx6qGjvt/M5bXEv8nS1LLOvPvV4rj2zfjVvizT0Lj8vNPP6s+4tcTNvLHqvenJ3KGjaHR0cDovL3d3dy5ib290Y3NzLmNvbS9wL2ZvbnQtYXdlc29tZS9kZXNpZ24uaHRtbAo8cD48L3A+CjxwPsTH1Nppb3O/qrei1tDI57rOyrnTw0ZvbnRBd2Vzb21ltqjWxtfUvLrPsru2tcTNvLHqxNihozwvcD4KPHA+z8LD5s2ouf3Su7j2yr7A/b3pydzSu8/CoaM8L3A+CjxwPqOoz8jPwtTYZGVtbyxkZW1vz8LU2MG0vdPOqqO6aHR0cDovL2Rvd25sb2FkLmNzZG4ubmV0L2RldGFpbC9oaXR3aHlsei83MDIwMTU1o6k8L3A+CjxwPtCnufvI58/Co7o8L3A+CjxwPjxpbWcgc3JjPQ=="http://www.2cto.com/uploadfile/Collfiles/20140311/20140311085610150.gif" alt="\"> java

1.從demo中提取出NSString+FontAwesome.h/.m文件,FontAwesome.ttf字體文件導入到本身工程中。 ios

2.在.plist配置文件中新建一列（Fonts provided by application）,加入FontAwesome.ttf這個元素。（若是不懂能夠帶demo裏面的plist文件） css3

3.在使用的地方,添加頭文件 git

#import "NSString+FontAwesome.h" github

4.在須要使用的地方,加入這樣的語句。 web

[button_2 setTitle:[NSString stringWithFormat:@" %@ Delete按鈕",iconString] forState:UIControlStateNormal];
    [button_2.titleLabel setFont:[UIFont fontWithName:@"FontAwesome" size:14]];

這樣就能使用到FontAwesome中提供的圖標了。

具體能夠參見我所給的代碼。數組

另外mark下兩個網上的實例，效果都不錯。 xcode

http://code4app.com/ios/fontawesome/50f01ff26803fa706e000000#

http://code4app.com/ios/UIButton-Bootstrap/52635e8c6803fa576b000000

////////////// 另外一種方式介紹

在開發阿里數據iOS版客戶端的時候，因爲項目進度很緊，項目裏的全部圖標都是用最日常的背景圖片方案來實現。而爲了要兼容普通屏與Retina屏的設備，蘋果要求每一個背景圖都要以兩種尺寸存(a.png和a@2x.png)，這讓設計師們增長了成本，由於他們每次都得出兩份背景圖標。

如今在web開發上， icon font技術的應用很普遍，它不只在解決多分辨率顯示問題上頗有成效，並且在使用它的時候還能下降很多設計和開發成本。

那麼它能不能應用到ios開發上來呢？帶着這個疑問，我在github上找到了 FontasticIcons和 ios-fontawesome，可是這兩個OC包對icon資源封裝都有限，並且擴展也不是很方便。

既然能在ios上使用icon font，那麼怎麼用呢？通過一番摸索，發現使用原理和自定義字體差很少，只有個別操做不太同樣，接下來我給你們詳細介紹一下。

如何使用自定義字體

在講icon font以前，首先先來看看普通自定義字體是如何在ios中使用的，兩個原理是同樣的。這裏以 KaushanScript-Regular爲例：

Step 1: 導入字體文件

將字體文件拖入項目（ios支持的字體格式有：.ttf、.otf，其餘格式不肯定）：

而後再在項目的資源池中確認字體文件是否加入項目，打開xcode項目的Build Phases中查看：

Step 2: 配置.plist文件

在.plist文件中註冊新加入的字體，.plist文件每每以「[appname]-Info.plist」的形式存在於「Supporting Files」文件夾內。在.plist文件中添加新屬性「Fonts provided by application」，該屬性的值是一個數組，這意味着能夠在這裏註冊多個字體。

Step 3: 找到字體集名稱

註冊完，咱們須要檢測是否註冊成功且取得新字體名稱，檢測方法就是把全部安裝了的字體都打印出來，看看新註冊的字體是否在裏面：

  
 
   for (NSString* family in [UIFont familyNames])   
 
   {   
 
       NSLog(@"%@", family);   
 
       for (NSString* name in [UIFont fontNamesForFamilyName: family])   
 
       {   
 
           NSLog(@"  %@", name);   
 
       }   
 
   }

運行完，查看控制檯裏打印出的全部字體集中是否有新註冊的字體，若是有，說明註冊成功，並將字體名（在這裏是「Kaushan Script」）記住留到後面用。

Step 4: 使用新字體

最後，就是使用你最新加入的字體啦：

  
 
   UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 60, 300, 50)];   
 
   label.font = [UIFont fontWithName:@"Kaushan Script" size:35];   
 
   label.text = @"icon font";   
 
   label.textColor = UIColorFromRGB(0xFF7300);   
 
   [self.view addSubview:label];

效果：

開始使用icon font

圖標字體也是字體，使用方式和上面所說的差很少，只是在套用上有些差異；這裏拿 fontello的圖標字體庫爲例。

1.選擇須要的圖標

在fontello的圖標字體庫選擇本身須要的圖標，並下載生成的字體文件。

2.按照上面的步驟將圖標字體註冊到項目中

3.找到圖標對應的unicode碼

使用 FontLab Studio 5工具打開字體文件（好比fontello.ttf），就能夠看到圖標與unicode碼之間的對應關係啦。

4.使用圖標

  
 
   UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 60, 300, 50)];   
 
   label.font = [UIFont fontWithName:@"fontello" size:35];   
 
   label.text = @"\U0000E802 \U0000E801 \U0000E803 \U0000E804 \U0000E805 \U0000E81A";   
 
   label.textColor = UIColorFromRGB(0xFF7300);   
 
   [self.view addSubview:label];

在Objective-C中，自定義的unicode碼須要以「\U0000E802」這樣的格式存在。

5.使用emoji表情庫

這裏還可使用蘋果emoji表情庫的圖標，這裏不須要新加字體庫，只要找到emoji圖標和unicode之間的對應關係就好，可是這些圖標都不是矢量圖，縮放請自重。

  
 
   UILabel *label5 = [[UILabel alloc] initWithFrame:CGRectMake(10, 480, 300, 50)];   
 
   label5.text = @"\U0000e42a\U0000e525\U0000e41c";   
 
   [self.view addSubview:label5];

6.效果

7.使用自制圖標字體

若是上面介紹的圖標庫還知足不了你的需求，或者須要的圖標分佈在多個圖標庫而不能集中到一個字體文件中；那麼你可能須要本身去製做圖標字體文件了。

總結

這樣，在iOS開發上，不只能夠直接去開源圖標庫找現成的圖標用到項目中，並且還能夠輕鬆地改變圖標的顏色、大小，相信能夠解放很多設計師和工程師的工做量。

上代碼

demo

圖標字體庫

fontello

etao圖標字體庫（這裏有個問題要注意，etao的圖標字體名爲「Untitled1」，是否是生成字體的同窗疏忽啦？）

IcoMoon

emoji表情庫