一、問題描述
ionic項目提供了一套豐富的圖標(biāo)庫爽待，雖然很實用损同，但是在實際項目中，還是需要根據(jù)視覺稿來增加圖標(biāo)鸟款。
通常膏燃，我們都會使用@font-face導(dǎo)入自定的字體文件。
二何什、準(zhǔn)備圖標(biāo)
打開阿里圖標(biāo)庫组哩，把想要的圖標(biāo)加入購物車，然后添加至項目处渣。
在我的項目中伶贰，找到你剛剛新添加的圖標(biāo)所屬的項目，點擊上面的 更多操作 -> 編輯項目
修改項目設(shè)置,把前綴改為ion- 罐栈，因為ionic的圖標(biāo)都是ion-開頭的黍衙，修改完之后，保存荠诬，下載
三琅翻、ionic項目操作
3.1 打開你的ionic項目位仁，在src->assets目錄下，新建一個fonts目錄方椎，然后解壓剛剛下載的圖標(biāo)文件聂抢，把以下幾個文件拷貝到新建的fonts目錄下
3.2 把iconfont.css 改為iconfont.scss，打開iconfont.scss辩尊，修改.iconfont類
.iconfont {
font-family: "iconfont" !important;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
注意：
1涛浙、要把font-size: 16px; 刪除康辑，不然圖標(biāo)會變小摄欲。
2、@font-face的font-family值跟上面修改類的名字要對應(yīng)疮薇，如果@font-face的font-family值為iconfont胸墙，那上面修改的類名稱也要改為.iconfont。
3.3 ion-ios-*
在ionic3中引用圖標(biāo)主要靠名稱來引用按咒，因為我項目已經(jīng)聲明為ios模式迟隅，所以類名都是ion-ios-，其中像.ion-ios-user-outline這種是tab未被選中時的樣式励七，每一個圖標(biāo)類后面必須再加一個-outline的類智袭，不然字體圖標(biāo)會無法顯示。所有的ion-ios-以及ion-ios-*-outline類都要繼承.iconfont
@font-face {
font-family: "iconfont";
src: url('../assets/fonts/iconfont.eot?t=1563854062704');
/* IE9 */
src: url('../assets/fonts/iconfont.eot?t=1563854062704#iefix') format('embedded-opentype'),
/* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMsAAsAAAAAB3AAAALdAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqCeIJCATYCJAMICwYABCAFhG0HMxtrBhHVk6lkPwrjmNgeZhqs9Nf/7dHY9yF4HtfK95PsXi57BKxKzBaZRpiWVdkh6UEVLgU5mBzQtjjnmXXU5UjOnjz6QjrgLCdhxf/ncGljY0Dz914cUMpzDI16AcYbC2iPm4vsDjeA3zC9fHkwz4cAjiwVpF2Hbv2wGPQsAWTa5ImjsSkvBsMSFiFYstEgmwhg1Wr1EGz0P16+qsuCIqDRJb0mtB9Hqw/RJkUv8hcZ5iLgjWcG2DbQQAUwIP1KrT3QYbSCxvGoIQ/rKhT4EO37rh5Z6z8PCaLzIwDIgNxz4tn8U81XABjYvQis6XUDMLlFjWbuENnzoCnq2r2UQYlu/7PGtcnKZY2++SJbbw99uhu06FRB1Ikzol3y9ttr7zrmRDewtqdbdGrNmTSE3MUp5UP3ni2MPnk6dXD6eWdEE9Uy9/24DHV7+axxs7afHpc12hhq7moH29Sr66gm2+FqZCuM2bYr5TEY1upxyijJ93LLaj1MzvWekLxaQm75/Hxp7XJ2JVQl7CpepRG1aJeu1MyEKr2qeICMjN6xpGZczZwTwcVEr/JeF5QW0AoAf/qPbvU7/oaIzENbR0Y3+29DBoCXw47/8N3+DO3sYE/aJvDyeS2rjBBohboMLrIpFiVmowCHA3zYGeddX2XinSYFS+L92sPIjEFjKUAabAUECNEAQSwtwVGu4/YQ8eagERMOlFkOQIhxERRReKCJ8QhpsG8hAL7zh55FbRh5tj5wbF80OhAKRg3yB5EqcmMZeBQUXjF4pYKSAp/yRKqjALiWk01cMEcaY0n9DjxmA4aKDM7gYpimBZRUxKjYCplL37ZN2RtZqsgaIwcECQxpQPoBEaWQM259Nsq9/xUKvKQEqqnI2Z8QqUX9A5fFaYG8SPNWFdfykNpbwMOYAQxSyIAzMKPURAugLB8XQwqzhD3CJZ+Napm2Umt+efZ0GwBHq1RmgGb4ocgDHTmaRgMAAAA=') format('woff2'),
url('../assets/fonts/iconfont.woff?t=1563854062704') format('woff'),
url('../assets/fonts/iconfont.ttf?t=1563854062704') format('truetype'),
/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('../assets/fonts/iconfont.svg?t=1563854062704#iconfont') format('svg');
/* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ion-ios-shangdian:before,
.ion-ios-shangdian-outline:before {
@extend .iconfont;
}
.ion-ios-shangdian:before {
content: "\e60f";
}
3.4 修改相對路徑 ../assets/fonts/
如 src: url('../assets/fonts/iconfont.eot?t=1563854062704');
3.5 導(dǎo)入iconfont.scss
在src/theme/variables.scss 中導(dǎo)入iconfont.scss
@import "../assets/fonts/iconfont.scss";
3.6 在html中使用圖標(biāo)
效果如下：
注意：我這里使用的是class,而不是name掠抬。使用name時吼野，圖標(biāo)無法顯示，提示404 两波，如下圖：
<ion-tab-button tab="tab1">
<ion-icon name="ios-shangdian"></ion-icon>
<ion-label>網(wǎng)商</ion-label>
</ion-tab-button>
注：我使用的ionic版本為 5.2.3
