常見圖標有圖像圖標和字體圖標兩種，在移動端，字體圖標對比圖像圖標有不少優點，所以一般采用字體圖標為主。而字體圖標的優缺點(使用圖標字體的優點與缺點 | 驟雨打新荷)摘錄如下，有興趣可了解下：

圖標字體的優點：
1、擴展性更強：圖標字體可任意縮放、改變顏色、產生陰影或透明效果。
2、靈活性更高：圖標字體可以得到CSS的很好支持，大小和顏色都很容易用CSS控制。
3、顯示效果佳：矢量圖標字體與分辨率無關，無論屏幕PPI高或低，顯示效果俱佳。
4、兼容性更廣：如果使用得當，圖標字體100％可訪問，并與幾乎所有瀏覽器兼容。
5、優化效果好：由于圖標字體體積更小而攜帶的信息并未削減，可大大減少HTTP請求。
圖標字體的缺點：
1、由于圖標字體只能被渲染成單色或者CSS3的漸變色，使得它不能被廣泛使用。
2、很多精美圖標字體是收費的，不過精美開源的免費圖標也越來越多，并提供下載使用。
3、自已創作圖標字體費時費力，后期維護成本偏高。

UI效果圖給出了所需圖標：

image.png

我們需要把它裁切并轉成svg格式再生成字體圖標，比較繁瑣，而我新系統目前也沒有裝相應軟件，所以這里不采用這些圖標，選用網上已有類似的字體圖標來代替。

免費的字體圖標庫很多，在這里我們打開阿里的圖標庫網站iconfont，隨便找一個圖標庫（選圖標庫而不是選圖標，是為了讓圖標風格一致）：

image.png

加入購物車，并下載代碼：

image.png

下載完成解壓，并把這幾個文件拷貝到src/assets/fonts目錄中：

iconfont.css
iconfont.eot
iconfont.svg
iconfont.ttf
iconfont.woff

關于圖標文件的修改有好幾種方法，網上搜索即可，在這里只介紹一種：

1. 打開iconfont.css修改：

image.png

修改的內容，是為了可以用ionic的方式來使用這些自定義圖標(其中，注意前綴是ion-ios-，不是icon-ios-)；

注釋的內容，沿用ionic的，這里沒必要使用；

復制的內容，是為了tab圖標在失去焦點后顯示另一種狀態Outline，如有類似下圖的一對圖標的話，就其中一個設置為Outline，如果沒有，就復制一份設置為Outline。

image.png

2. 修改tabs.html里的圖標名字為這幾個自定義圖標：

  <ion-tab [root]="tab1Root" tabIcon="zhuye"></ion-tab>
  <ion-tab [root]="tab2Root" tabIcon="bianqian"></ion-tab>
  <ion-tab [root]="tab3Root" tabIcon="xinxi"></ion-tab>
  <ion-tab [root]="tab4Root" tabIcon="lianxiren"></ion-tab>

3. 最后在index.html里面添加:

<link rel="stylesheet" href="assets/fonts/iconfont.css"> 

或者，可以在app.scss或variables.scss中import:

@import "../assets/fonts/iconfont.css";

最最后瀏覽器運行查看下效果，在此就不上圖了。