今天就跟大家聊聊有關(guān)怎么將iconfont字體圖標(biāo)引入到mpvue小程序中，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括嘉定網(wǎng)站建設(shè)、嘉定網(wǎng)站制作、嘉定網(wǎng)頁(yè)制作以及嘉定網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專(zhuān)注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，嘉定網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶(hù)以成都為中心已經(jīng)輻射到嘉定省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶(hù)的支持與信任！

將圖標(biāo)加入購(gòu)物車(chē)

搜索關(guān)鍵詞可以是中文也可以是英文

下載素材

點(diǎn)擊網(wǎng)站右上角的購(gòu)物車(chē)圖標(biāo)，此處我們選第三個(gè)

ps:添加到項(xiàng)目很有用，可以在線(xiàn)編輯自己喜歡的圖標(biāo)大小樣式/重命名/邀請(qǐng)成員等，此處我們選擇加入項(xiàng)目并下載代碼

文件解壓

一般網(wǎng)頁(yè)中為了兼容性考慮，我們會(huì)留下css/ttf/svg/woff/eot文件，小程序中則有自己的規(guī)則，此處我們留下css和ttf文件，關(guān)于怎么處理請(qǐng)繼續(xù)閱讀

方法一、本地引入

由于小程序不支持處理ttf/woff/eot等文件，~~我們必須將子圖文件轉(zhuǎn)為base64格式再引入，~~直接使用源文件會(huì)提示幾種字體文件沒(méi)有上傳，導(dǎo)致打包上傳后字體無(wú)法顯示。將引入eot/ttf/svg的幾行刪除，在base64那一行前加上src即可。

ttf轉(zhuǎn)base64（iconfont下載的文件已有base64轉(zhuǎn)碼，此步跳過(guò)）

transfonter

用stylesheet.css內(nèi)容替換iconfont.css引入部分（上同

替換結(jié)果：

方法二、cdn引入

按項(xiàng)目需求，可選擇cdn方式引入字體圖標(biāo)。優(yōu)點(diǎn)：本地文件??；缺點(diǎn)：網(wǎng)絡(luò)不好的情況下頁(yè)面可能會(huì)暫時(shí)缺失圖標(biāo)。
在“我的項(xiàng)目”中，點(diǎn)擊查看在線(xiàn)鏈接，復(fù)制代碼：

將iconfont.css的@font-face部分換成之前復(fù)制的帶有alicdn的代碼。

引入css

App.vue style開(kāi)頭引入：

@import '../static/iconfont.css' // 若css在static中，要加..，不然會(huì)報(bào)錯(cuò)

使用字符圖標(biāo)

注意事項(xiàng)

1.多個(gè)圖標(biāo)1次下載，也只需要一個(gè)ttf文件，同樣的，如果有新增或修改的圖標(biāo)文件，需要全部下載1遍再轉(zhuǎn)為base64，
2.強(qiáng)烈建議新建一個(gè)項(xiàng)目保存你的字體文件，永久記錄且可編輯（縮放、旋轉(zhuǎn)），項(xiàng)目入庫(kù)在網(wǎng)站上方-圖標(biāo)管理-我的項(xiàng)目。
3.使用css預(yù)處理如scss的大體流程一樣，就是將iconfont.css換為你的css預(yù)處理文件格式，在App.vue中引入
4.有問(wèn)題或流程不清楚的歡迎反饋~

看完上述內(nèi)容，你們對(duì)怎么將iconfont字體圖標(biāo)引入到mpvue小程序中有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。