2019-01-10更新：魚貓的個人博客上線啦！魚貓的個人博客?歡迎點擊查看喲！
說明：這篇文章介紹的方法步驟比較多叨襟，主要是在圖標的準備那方面，對于這個幔荒，我重新寫了一篇文章糊闽，步驟少一點梳玫，不需要去準備svg矢量圖再轉(zhuǎn)換成字體圖標，有興趣的可以看看《ionic3 自定義圖標-魚貓的個人博客》
? ? ?用了一段時間的ionic3右犹，開發(fā)體驗還是不錯的提澎。相比ionic1來說好了很多，開發(fā)過程讓人舒服很多念链。但期間遇到一些問題盼忌，其中一個就是ionic3提供的圖標有點少，有點滿足不了需求掂墓，所以這時候用到自定義圖標谦纱。以下
? ? 已經(jīng)用ionic3的童鞋應該會發(fā)現(xiàn)，ionic3現(xiàn)在使用圖標的方式基本都是使用<ion-icon>這個組件君编，在加上相應的name屬性服协，這個name對應的就是字體圖標的名字，ionic便會在使用該組件的地方渲染出圖標啦粹。那么，按照這種做法窘游，我們也可以使用自定義的字體圖標唠椭，代替ionic的圖標庫，完成自己的需求忍饰。
準備工作
? ? 首先贪嫂，準備好圖標的svg的矢量圖標
? ? ????有些童鞋可能會不明白怎么弄svg，這里介紹一個網(wǎng)站艾蓝，相信很多人都知道力崇，就是阿里云矢量圖標網(wǎng)Iconfont-阿里巴巴矢量圖標庫，登錄帳號好將想要的圖標添加到購物車赢织，然后下載素材亮靴，其中就有一個選項是下載svg格式的。
生成字體圖標
進入icomoon網(wǎng)站使用svg圖片生成字體圖標
使用生成的字體圖標
將下載的壓縮包解壓于置，把其中的fonts文件夾導入項目的assets文件夾中茧吊，并將解壓得到的style.css文件重命名，改為icons.scss八毯，并復制到src/assets/fonts文件夾下
修改icons.scss中@font-face的文件引用路徑
修改字體公共樣式
原代碼
修改后
注：我們將[class^="ion-"], [class*=" ion-"] 選擇器改為類搓侄，并讓字體圖標類去繼承，因為使用[class^="ion-"], [class*=" ion-"] 選擇器會影響ionic自帶的圖標庫
修改字體圖標
修改前
修改后
注：在ionic3中引用圖標主要靠名稱來引用话速，因為我項目已經(jīng)聲明為ios模式讶踪，所以類名都是ion-ios-*，其中像.ion-ios-user-outline這種是tab未被選中時的樣式泊交，每一個圖標類后面必須再加一個-outline的類乳讥，不然字體圖標會無法顯示柱查。
最后，在src/theme/variables.scss 中導入icons.scss雏婶，我們就可以使用自定義的字體圖標了
來看看效果吧
