常見圖標有圖像圖標和字體圖標兩種，在移動端，字體圖標對比圖像圖標有不少優(yōu)點竖慧，所以一般采用字體圖標為主。而字體圖標的優(yōu)缺點(使用圖標字體的優(yōu)點與缺點 | 驟雨打新荷)摘錄如下逆屡，有興趣可了解下：
圖標字體的優(yōu)點：
1圾旨、擴展性更強：圖標字體可任意縮放、改變顏色魏蔗、產(chǎn)生陰影或透明效果碳胳。
2、靈活性更高：圖標字體可以得到CSS的很好支持沫勿，大小和顏色都很容易用CSS控制。
3味混、顯示效果佳：矢量圖標字體與分辨率無關产雹，無論屏幕PPI高或低，顯示效果俱佳翁锡。
4蔓挖、兼容性更廣：如果使用得當，圖標字體100％可訪問馆衔，并與幾乎所有瀏覽器兼容瘟判。
5、優(yōu)化效果好：由于圖標字體體積更小而攜帶的信息并未削減角溃，可大大減少HTTP請求拷获。
圖標字體的缺點：
1、由于圖標字體只能被渲染成單色或者CSS3的漸變色减细，使得它不能被廣泛使用匆瓜。
2、很多精美圖標字體是收費的，不過精美開源的免費圖標也越來越多驮吱，并提供下載使用茧妒。
3、自已創(chuàng)作圖標字體費時費力左冬，后期維護成本偏高桐筏。
UI效果圖給出了所需圖標：
我們需要把它裁切并轉(zhuǎn)成svg格式再生成字體圖標，比較繁瑣拇砰，而我新系統(tǒng)目前也沒有裝相應軟件梅忌，所以這里不采用這些圖標，選用網(wǎng)上已有類似的字體圖標來代替毕匀。
免費的字體圖標庫很多铸鹰，在這里我們打開阿里的圖標庫網(wǎng)站iconfont，隨便找一個圖標庫（選圖標庫而不是選圖標皂岔，是為了讓圖標風格一致）：
加入購物車蹋笼，并下載代碼：
下載完成解壓，并把這幾個文件拷貝到src/assets/fonts目錄中：
iconfont.css
iconfont.eot
iconfont.svg
iconfont.ttf
iconfont.woff
關于圖標文件的修改有好幾種方法躁垛，網(wǎng)上搜索即可剖毯，在這里只介紹一種：
- 打開iconfont.css修改：
修改的內(nèi)容，是為了可以用ionic的方式來使用這些自定義圖標(其中教馆，注意前綴是
ion-ios-逊谋，不是icon-ios-)；
注釋的內(nèi)容土铺，沿用ionic的胶滋，這里沒必要使用；
復制的內(nèi)容悲敷，是為了tab圖標在失去焦點后顯示另一種狀態(tài)Outline究恤，如有類似下圖的一對圖標的話，就其中一個設置為Outline后德，如果沒有部宿，就復制一份設置為Outline。
- 修改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>
- 最后在
index.html里面添加:
<link rel="stylesheet" href="assets/fonts/iconfont.css">
或者瓢湃，可以在app.scss或variables.scss中import:
@import "../assets/fonts/iconfont.css";
最最后瀏覽器運行查看下效果理张，在此就不上圖了。
