有時候我們需要修改tabs或者其他的ionic的圖示，雖然ionic系統提供了很多，但如果想使用其他的，之前以為只能用png來設定background，但效果並不好；最近發現了很好的方法，跟大家分享。

是無意中看到這個帖子add icons 才發現的。

1、兩個網站

一個是 阿里圖示庫 這裡面幾乎能滿足很多人的需要了http://www.iconfont.cn/

一個是 icomoon 下面提到https://icomoon.io/

2、ionic提供給我們的icon主要是放在www/lib/ionic/fonts/ 目錄下的4各檔案：ionicons.eot ionicons.svg ionicons.ttf ionicons.woff實現的，至於這四個檔案是啥我也不是很懂，然後在ionic.css裡面有定義各個圖示；所以我們自定義的圖示也應該一樣，找到方式就剩怎麼生成這4個檔案(下面我叫它們“四賤客”)。

3、上面所說的icomoon這個網站主要就是用來生成“四賤客”用的，需要的原材料就一個svg檔案夠了，一般來說我是去阿里圖示庫上來找到的，你也可以去其他地方找，只要是svg檔案，這裡我下載了6個，一正一反共3對。

開啟icomoon網站，注意看右上角有個 IcoMoon App ，點選進入到我們生成“四賤客”的地方。

左上角有個 Import Icons 按鈕，上傳剛剛下載的svg檔案，上傳完成後還需要勾選上(不勾選上的邊框是灰色的)，如果不勾選上則生成的“四賤客”是不包含這個圖示的。然後點選右下角的 Generate font按鈕來生成“四賤客”。

生成“四賤客”成功後，icomoon會有一個24小時有效的css連結提供測試，當然我們需要的是下載“四賤客”，點選右下角的 Download下載“四賤客”壓縮檔案，至此，生成“四賤客”就完成了。

下載檔案解壓後，裡面的fonts目錄就是“四賤客”的存放的地方，還有個style.css，是類似ionic.css定義的檔案，我們把fonts和style.css拷貝到ionic專案中，我這裡是把fonts合併到www/lib/ionic/fonts/目錄，style.css重新命名為icomoon.css並放到www/lib/ionic/css/ 目錄下，在index.html引入icomoon.css。

在tabs.html中使用就不多說了。

PS：這裡要修改的一個小地方，開啟icomoon.css，頂部的@font-face的src引用路徑要正確，並且要把單引號改為雙引號，不然顯示不出來(不知道什麼原因)。

最後效果圖：