http://icomoon.io/app/
阿里巴巴http://iconfont.cn/help/iconuse.html
3.1 PC端應用教程
iconfont對於前端應用來說有很多便捷：
1、自由變化大小
2、自由修改顏色
3、可以添加一些視覺效果如：陰影、旋轉、透明度。
4、兼容IE6
應用步驟：
1
font-face聲明字體
@font-face {font-family: 'iconfont';
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome、firefox */
url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
2
定義使用iconfont的樣式
.iconfont{font-family:"iconfont";
font-size:16px;font-style:normal;}
3
挑選相應圖標並獲取字體編碼，應用於頁面
<i class="iconfont">!</i>
3.2 PC端應用常見問題
1、字體圖標在safair或chrome瀏覽器下被加粗？
(被加粗的字體圖標)
(正常比例的字體圖標)
以上現象是由於字體圖標存在半個像素的鋸齒，在瀏覽器渲染的時候直接顯示一個像素了，導致在有背景下的圖標顯示感覺加粗；所以在應用字體圖標的時候需要對圖標樣式進行抗鋸齒處理，CSS代碼設置如下：
.iconfont{-webkit-font-smoothing: antialiased;}
2、字體圖標在IE7瀏覽器顯示中圖標右側出現小方框現象；
出現以上現象可以對引用字體圖標的非塊標簽進行以下CSS定義:
display: block;
3、字體圖標在pc端的chrome瀏覽器下出現嚴重的鋸齒；
出現以上現象可以對字體圖標的邊緣進行模糊；（只支持webkit內核瀏覽器,參數數值不宜設置得很大，這會帶來圖標加粗的問題）
-webkit-text-stroke-width: 0.2px;
放大后出現鋸齒的情況
邊緣模糊后，完美展現
3.3 在Android 中使用iconfont
應用步驟：
1
第一步：復制字體文件到項目 assets 目錄；
2
第二步：打開 iconfont 目錄中的 demo.html，找到圖標相對應的 HTML 實體字符碼；
3
第三步：打開 res/values/strings.xml，添加 string 值；
<string name="icons">㘅 㖭 㖮 㖯</string>
4
第四步：打開 activity_main.xml，添加 string 值到 TextView：
<TextView
android:id="@+id/like"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/icons" />
5
第五步：為 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);
}
3.4 在IOS中使用iconfont
應用步驟：
1
添加IconFont字體:
1、將您IconFont剛下載的字體文件(.ttf)添加到工程中
2、打開Info.plist文件，增加一個新的Array類型的鍵，鍵名設置為UIAppFonts（Fonts provided by application），增加字體的文件名：“iconfont.ttf“
2
使用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];
這里有兩個地方注意下：
創建 UIFont 使用的是字體名，而不是文件名；
文本值為 8 位的 Unicode 字符，我們可以打開 demo.html 查找每個圖標所對應的 HTML 實體 Unicode 碼，比如：
"店" 對應的 HTML 實體 Unicode 碼為：
0x3439
轉換后為
\U00003439
就是將 0x 替換為 \U 中間用 0 填補滿長度為 8 個字符
參數設置：https://coderwall.com/p/wrb3pw