隨著IOS7普及，扁平化設計在移動設備的應用越來越多，iconfont在移動設備上應用的話題也越來越受前端工程師關注，下面是阿里媽媽MUX團隊在移動平臺應用的一些經驗教程；
iconfont的優點
iconfont在web上的應用已經很廣泛，如淘寶、一淘、sina、豆瓣等大網站都已經在自己的網站上應用了iconfont技術；它能有效的解決分辨率的問題，并且在應用的時候非常便捷，節省前端、設計很多重復改圖、調色的工作。在移動設備上眾多DPI設備更是一個困擾問題設計師、前端的大問題；一個app在適配高低版本iphone手機及分辨率眾多的安卓設備的時候設計師需要設計很多版本的圖片，而iconfont這種矢量圖形就能很好解決這種重復設計的工作；
在Android中使用iconfont圖標
以下教程的icon均來自www.iconfont.cn
在Android設備中使用iconfont圖標實例Demo
應用步驟
step1:從iconfont平臺選擇要使用到的圖標，并下載至本地；復制字體文件到項目 assets 目錄；
step2:打開從iconfont平臺下載下來的文件，并在目錄中打開demo.html，找到圖標相對應的 HTML 實體字符碼；
step3:打開 res/values/strings.xml，添加 string 值；
<string name="icons">㘅 㖭 㖮 㖯</string>
step4:打開 activity_main.xml，添加 string 值到 TextView：
<TextView
android:id="@+id/like"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/icons" />
step5:為 TextView 指定文字：
import android.graphics.Typeface;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Typeface iconfont = Typeface.createFromAsset(getAssets(), "iconfont/iconfont.ttf");
TextView textview = (TextView)findViewById(R.id.like);
textview.setTypeface(iconfont);
}
圖例
在IOS中使用iconfont圖標
在IOS中使用iconfont圖標實例Demo
應用步驟
step1：將您從IconFont平臺下載的字體文件(.ttf)添加到工程中；
打開Info.plist文件，增加一個新的Array類型的鍵，鍵名設置為UIAppFonts（Fonts provided by application），增加字體的文件名：“iconfont.ttf“
step2：使用IconFont字體:
UILabel * label = [[UILabel alloc] initWithFrame:self.view.bounds];
UIFont *iconfont = [UIFont fontWithName:@"uxIconFont" size: 34];
label.font = iconfont;
label.text = @"\U00003439 \U000035ad \U000035ae \U000035af \U000035eb \U000035ec";
[self.view addSubview: label];
這里有兩個地方注意下：
1、創建 UIFont 使用的是字體名，而不是文件名；
2、文本值為 8 位的 Unicode 字符，我們可以打開 demo.html 查找每個圖標所對應的 HTML 實體 Unicode 碼，比如：
"店" 對應的 HTML 實體 Unicode 碼為：0x3439 轉換后為：\U00003439
就是將 0x 替換為 \U 中間用 0 填補滿長度為 8 個字符
