便于歸類幅虑，從自己的文章拷貝過來：
【Appetite】ionic3實(shí)錄（三）修改自定義圖標(biāo)
常見圖標(biāo)有圖像圖標(biāo)和字體圖標(biāo)兩種，在移動(dòng)端，字體圖標(biāo)對(duì)比圖像圖標(biāo)有不少優(yōu)點(diǎn)嗤堰，所以一般采用字體圖標(biāo)為主园爷。而字體圖標(biāo)的優(yōu)缺點(diǎn)(使用圖標(biāo)字體的優(yōu)點(diǎn)與缺點(diǎn) | 驟雨打新荷)摘錄如下宠蚂，有興趣可了解下：
圖標(biāo)字體的優(yōu)點(diǎn)：
1、擴(kuò)展性更強(qiáng)：圖標(biāo)字體可任意縮放童社、改變顏色求厕、產(chǎn)生陰影或透明效果。
2、靈活性更高：圖標(biāo)字體可以得到CSS的很好支持呀癣，大小和顏色都很容易用CSS控制美浦。
3、顯示效果佳：矢量圖標(biāo)字體與分辨率無關(guān)项栏，無論屏幕PPI高或低浦辨，顯示效果俱佳。
4沼沈、兼容性更廣：如果使用得當(dāng)流酬，圖標(biāo)字體100％可訪問，并與幾乎所有瀏覽器兼容列另。
5芽腾、優(yōu)化效果好：由于圖標(biāo)字體體積更小而攜帶的信息并未削減，可大大減少HTTP請(qǐng)求访递。
圖標(biāo)字體的缺點(diǎn)：
1晦嵌、由于圖標(biāo)字體只能被渲染成單色或者CSS3的漸變色，使得它不能被廣泛使用拷姿。
2惭载、很多精美圖標(biāo)字體是收費(fèi)的，不過精美開源的免費(fèi)圖標(biāo)也越來越多响巢，并提供下載使用描滔。
3、自已創(chuàng)作圖標(biāo)字體費(fèi)時(shí)費(fèi)力踪古，后期維護(hù)成本偏高含长。
UI效果圖給出了所需圖標(biāo)：
我們需要把它裁切并轉(zhuǎn)成svg格式再生成字體圖標(biāo)，比較繁瑣伏穆，而我新系統(tǒng)目前也沒有裝相應(yīng)軟件拘泞，所以這里不采用這些圖標(biāo)，選用網(wǎng)上已有類似的字體圖標(biāo)來代替枕扫。
免費(fèi)的字體圖標(biāo)庫很多陪腌，在這里我們打開阿里的圖標(biāo)庫網(wǎng)站iconfont，隨便找一個(gè)圖標(biāo)庫（選圖標(biāo)庫而不是選圖標(biāo)烟瞧，是為了讓圖標(biāo)風(fēng)格一致）：
加入購物車诗鸭，并下載代碼：
下載完成解壓，并把這幾個(gè)文件拷貝到src/assets/fonts目錄中：
iconfont.css
iconfont.eot
iconfont.svg
iconfont.ttf
iconfont.woff
關(guān)于圖標(biāo)文件的修改有好幾種方法参滴，網(wǎng)上搜索即可强岸，在這里只介紹一種：
- 打開iconfont.css修改：
修改的內(nèi)容，是為了可以用ionic的方式來使用這些自定義圖標(biāo)(其中砾赔，注意前綴是
ion-ios-蝌箍，不是icon-ios-)青灼；
注釋的內(nèi)容，沿用ionic的十绑，這里沒必要使用聚至；
復(fù)制的內(nèi)容，是為了tab圖標(biāo)在失去焦點(diǎn)后顯示另一種狀態(tài)Outline本橙，如有類似下圖的一對(duì)圖標(biāo)的話扳躬，就其中一個(gè)設(shè)置為Outline，如果沒有甚亭，就復(fù)制一份設(shè)置為Outline贷币。
- 修改tabs.html里的圖標(biāo)名字為這幾個(gè)自定義圖標(biāo)：
<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";
最最后瀏覽器運(yùn)行查看下效果亏狰，在此就不上圖了役纹。
