詳解mpvue小程序中怎么引入iconfont字體圖標(biāo)

更新時間：2018年10月01日 09:58:50 作者：衛(wèi)夫子

這篇文章主要介紹了詳解mpvue小程序中怎么引入iconfont字體圖標(biāo)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

前言

iconfont阿里巴巴矢量圖標(biāo)庫是我很喜歡的一個網(wǎng)站，可以下載/在線編輯/上傳自己需要的矢量圖標(biāo)，也支持團(tuán)隊(duì)協(xié)作，那么在mpvue項(xiàng)目中如何引入呢？

iconfont阿里巴巴矢量圖標(biāo)庫

將圖標(biāo)加入購物車

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

下載素材

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

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

文件解壓

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

方法一、本地引入

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

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

transfonter

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

替換結(jié)果：

方法二、cdn引入

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

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

引入css

App.vue style開頭引入：

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

使用字符圖標(biāo)

<i class="iconfont icon-fangdajing"></i>

注意事項(xiàng)

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: