在頁(yè)面中昌妹，我們有時(shí)候?qū)σ粋€(gè)圖標(biāo)可能比較靈活捶枢，動(dòng)態(tài)設(shè)置顏色等等，就會(huì)用到字體圖標(biāo)
這里要注意飞崖，如果想下載字體格式烂叔，先把字體加入到購(gòu)物車(chē)，進(jìn)入購(gòu)物車(chē)固歪，會(huì)發(fā)現(xiàn)有一個(gè)下載代碼蒜鸡，下載后，會(huì)把字體文件打包下載下來(lái)牢裳。
接下來(lái)可以通過(guò)直接在項(xiàng)目中引用字體文件來(lái)使用逢防，也可以把字體轉(zhuǎn)成base64來(lái)使用，我們這里說(shuō)一下怎么把字體格式轉(zhuǎn)base64蒲讯。
第一步
進(jìn)入https://transfonter.org/字體轉(zhuǎn)換網(wǎng)站胞四，進(jìn)入后有一個(gè) Add fonts 按鈕，添加一個(gè)字體文件伶椿，這里上傳的是TTF格式文件辜伟，把剛剛阿里圖標(biāo)庫(kù)下載的字體包，里面的TTF文件上傳上去脊另，然后有一個(gè)Formats選項(xiàng)导狡，把TTF勾選上，其余的都不選偎痛，然后再把Base64 encode開(kāi)關(guān)打開(kāi)旱捧，最后點(diǎn)擊Convert按鈕，下載下來(lái)踩麦，打開(kāi)stylesheet.css 文件枚赡，里面就是生成的字體base64，就可以貼在代碼中了谓谦。
@font-face {
font-family: 'iconlove';
src: url(data:font/truetype;charset=utf-8;base64,AAEAAAANAIAAAwBQ........... format('truetype');
font-weight: normal;
font-style: normal;
}
上面代碼就是下載下來(lái)的
.iconlove {
font-family: "iconlove" !important;
font-size: 16px;
font-style: normal;
color: #B2B2B4;
}
在這個(gè)基礎(chǔ)上贫橙，我們可以擴(kuò)充相關(guān)的樣式
第二步
第二步也是最后一步，那就是增加一個(gè)樣式
剛剛從阿里圖標(biāo)庫(kù)下載的包反粥，找到iconfont.css的文件卢肃，里面有這樣一個(gè)樣式
.icon-icon-test:before {
content: "\e608";
}
找到后和前面的兩個(gè)樣式代碼放在一起疲迂，就能生效啦！Ｄ妗尤蒿！
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
