詳解mpvue小程序中怎么引入iconfont字體圖標(biāo)
前言
iconfont阿里巴巴矢量圖標(biāo)庫(kù)是我很喜歡的一個(gè)網(wǎng)站，可以下載/在線編輯/上傳自己需要的矢量圖標(biāo)，也支持團(tuán)隊(duì)協(xié)作，那么在mpvue項(xiàng)目中如何引入呢？
將圖標(biāo)加入購(gòu)物車(chē)
搜索關(guān)鍵詞可以是中文也可以是英文
下載素材
點(diǎn)擊網(wǎng)站右上角的購(gòu)物車(chē)圖標(biāo)，此處我們選第三個(gè)
ps:添加到項(xiàng)目很有用，可以在線編輯自己喜歡的圖標(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ò)）
用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)擊查看在線鏈接，復(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)
<i class="iconfont icon-fangdajing"></i>
注意事項(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)題或流程不清楚的歡迎反饋~
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue-router結(jié)合transition實(shí)現(xiàn)app前進(jìn)后退動(dòng)畫(huà)切換效果的實(shí)例
下面小編就為大家?guī)?lái)一篇Vue-router結(jié)合transition實(shí)現(xiàn)app前進(jìn)后退動(dòng)畫(huà)切換效果的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
React/vue開(kāi)發(fā)報(bào)錯(cuò)TypeError:this.getOptions?is?not?a?function
這篇文章主要給大家介紹了關(guān)于React/vue開(kāi)發(fā)報(bào)錯(cuò)TypeError:this.getOptions?is?not?a?function的解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
vue項(xiàng)目實(shí)現(xiàn)通過(guò)ip地址訪問(wèn)和localhost訪問(wèn)方式
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)通過(guò)ip地址訪問(wèn)和localhost訪問(wèn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue3的defineExpose宏函數(shù)是如何暴露方法給父組件使用
當(dāng)子組件使用setup后,父組件就不能像vue2那樣直接就可以訪問(wèn)子組件內(nèi)的屬性和方法,這個(gè)時(shí)候就需要在子組件內(nèi)使用defineExpose宏函數(shù)來(lái)指定想要暴露出去的屬性和方法,本文介紹vue3的defineExpose宏函數(shù)是如何暴露方法給父組件使用,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了vue地區(qū)選擇組件主要用于全國(guó)地區(qū)數(shù)據(jù)的操作，包括省，市，區(qū)三級(jí)聯(lián)動(dòng)，地區(qū)數(shù)據(jù)的添加和刪除,本文重點(diǎn)給大家介紹vue地區(qū)選擇組件教程詳解，需要的朋友參考下吧2018-05-05
這篇文章主要介紹了Vue實(shí)現(xiàn)文本編譯詳情，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下，希望對(duì)你的學(xué)習(xí)有所幫助2022-08-08
這篇文章主要介紹了vue項(xiàng)目配置代理如何解決跨域問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
頁(yè)面內(nèi)錨點(diǎn)定位及跳轉(zhuǎn)方法總結(jié)（推薦）
這篇文章主要介紹了頁(yè)面內(nèi)錨點(diǎn)定位及跳轉(zhuǎn)方法總結(jié)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue使用Font Awesome的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
Vue前端數(shù)值轉(zhuǎn)換為千分位格式并保留兩位小數(shù)代碼示例
在Vue.js開(kāi)發(fā)中我們經(jīng)常會(huì)遇到需要將數(shù)字格式化為保留兩位小數(shù)的情況,下面這篇文章主要給大家介紹了關(guān)于Vue前端數(shù)值轉(zhuǎn)換為千分位格式并保留兩位小數(shù)的相關(guān)資料,需要的朋友可以參考下2024-06-06