問題記錄:使用iconfont字體圖標(biāo)

問題描述

我把在iconfont.cn上下載的圖標(biāo)代碼放到應(yīng)用上時(shí),發(fā)現(xiàn)有的圖標(biāo)顯示正常,有的圖標(biāo)剛開始顯示正常,切換到另一個(gè)頁面的時(shí)候就開始異常了,顯示成了另一個(gè)圖標(biāo)的樣子。我檢查了圖標(biāo)的class,發(fā)現(xiàn)也沒有沖突,而且樣式寫在了<style scope></style>里面,按理說也不會被其他的樣式影響。
最后發(fā)現(xiàn),在這個(gè)頁面里面有一個(gè)組件A,組件A里面也引用了一個(gè)其他的iconfont,雖然兩個(gè)圖標(biāo)的class不同,但是他們class里面的content是相同的。

/* 首頁的樣式 */
.icon-start::before {
  content: '\e602'
}
/* 組件的樣式 */
.icon-up::before {
  content: '\e602'
}

即使他們使用了各自的iconfont樣式,但是他們的iconfont樣式都引用了相同的font-family

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

而兩個(gè)頁面都定義了同樣名為"iconfont"的字體,后出現(xiàn)的字體就把前面的字體定義覆蓋了

@font-face {
  font-family: "iconfont"; 
  src: url('iconfont.ttf?t=1645424918035') format('truetype');
}
解決

這時(shí)我們只需要將兩個(gè)文件的font-family名字修改為不同名字就可以了
參考:iconfont 字體生成原理及使用技巧

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容