在ionic3中自定義自己的圖標(biāo)字體

資源：阿里圖標(biāo)字體庫(kù)

step1：尋找資源

搜索圖標(biāo)字體庫(kù)，找到自己需要的圖標(biāo)字體并加入購(gòu)物車(chē)。
添加到已存在的項(xiàng)目或者創(chuàng)建新的項(xiàng)目。

step2：下載資源

選擇Font class類(lèi)型，點(diǎn)擊下載到本地。
下載完成后，解壓縮，會(huì)得到一個(gè)字體文件夾。
將字體文件中的：

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

五個(gè)文件拷貝到src/assets/fonts目錄下并將iconfont.css改為iconfont.scss（如果你的ionic用的是scss的話）
在項(xiàng)目的src/theme/variables.scss中加入下面代碼

$font-path: "../assets/iconfont";

step4：設(shè)置

打開(kāi)fonts.scss文件并修改：

// 設(shè)置你的icon的統(tǒng)一樣式
.you-icon-name { // 如果多個(gè)name，則以.name1,.name2,.name3形式
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
// 自定義自己的icon名稱(chēng)，后面的content值，參考原文件中的contnet
.you-icon-name:before{ content: "\e648"; }

完成后保存文件，重啟ionic serve

step5：使用

在你的項(xiàng)目中，在需要使用此圖標(biāo)字體的地方，使用：

<div>
    <ion-icon name="you-icon-name"></ion-icon>
</div>

step6：更新

如果以后需要更新圖標(biāo)庫(kù)，只需要在阿里圖標(biāo)庫(kù)的項(xiàng)目中添加新的圖標(biāo)字體，并下載下來(lái)后替換原有的文件，并設(shè)置fonts.css中的圖標(biāo)文字，當(dāng)然你也可以不改。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容