詳解mpvue小程序中怎么引入iconfont字體圖標(biāo)
前言
iconfont阿里巴巴矢量圖標(biāo)庫是我很喜歡的一個網(wǎng)站，可以下載/在線編輯/上傳自己需要的矢量圖標(biāo)，也支持團隊協(xié)作，那么在mpvue項目中如何引入呢？
將圖標(biāo)加入購物車
搜索關(guān)鍵詞可以是中文也可以是英文
下載素材
點擊網(wǎng)站右上角的購物車圖標(biāo)，此處我們選第三個
ps:添加到項目很有用，可以在線編輯自己喜歡的圖標(biāo)大小樣式/重命名/邀請成員等，此處我們選擇加入項目并下載代碼
文件解壓
一般網(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)碼，此步跳過）
用stylesheet.css內(nèi)容替換iconfont.css引入部分（上同
替換結(jié)果：
方法二、cdn引入
按項目需求，可選擇cdn方式引入字體圖標(biāo)。優(yōu)點：本地文件小；缺點：網(wǎng)絡(luò)不好的情況下頁面可能會暫時缺失圖標(biāo)。
在“我的項目”中，點擊查看在線鏈接，復(fù)制代碼：
將iconfont.css的@font-face部分換成之前復(fù)制的帶有alicdn的代碼。
引入css
App.vue style開頭引入：
@import '../static/iconfont.css' // 若css在static中，要加..，不然會報錯
使用字符圖標(biāo)
<i class="iconfont icon-fangdajing"></i>
注意事項
1.多個圖標(biāo)1次下載，也只需要一個ttf文件，同樣的，如果有新增或修改的圖標(biāo)文件，需要全部下載1遍再轉(zhuǎn)為base64，
2.強烈建議新建一個項目保存你的字體文件，永久記錄且可編輯（縮放、旋轉(zhuǎn)），項目入庫在網(wǎng)站上方-圖標(biāo)管理-我的項目。
3.使用css預(yù)處理如scss的大體流程一樣，就是將iconfont.css換為你的css預(yù)處理文件格式，在App.vue中引入
4.有問題或流程不清楚的歡迎反饋~
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue如何隨心所欲調(diào)整el-dialog中body的樣式
這篇文章主要介紹了vue如何隨心所欲調(diào)整el-dialog中body的樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
vue.js動態(tài)數(shù)據(jù)綁定學(xué)習(xí)筆記
這篇文章主要為大家詳細介紹了vue.js動態(tài)數(shù)據(jù)綁定學(xué)習(xí)筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要為大家詳細介紹了Vue3響應(yīng)式核心之effect的相關(guān)知識，文中的示例代碼講解詳細，對我們學(xué)習(xí)Vue3有一定的幫助，需要的可以參考一下2023-04-04
vue中使用vue-seamless-scroll插件實現(xiàn)列表無縫滾動效果
這篇文章主要介紹了vue中使用vue-seamless-scroll插件無縫滾動,支持上下左右無縫滾動，單步滾動停留時間，以及水平方向的手動切換，需要的朋友可以參考下2022-06-06
vite build vue3項目配置開啟sourcemap方式
這篇文章主要介紹了vite build vue3項目配置開啟sourcemap方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要為大家介紹了Vite使用Esbuild提升性能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
Vue3使用ref和reactive管理狀態(tài)的代碼示例
ref 和 reactive 是 Composition API 中用來聲明響應(yīng)式數(shù)據(jù)的兩個核心函數(shù),在 Vue 3 中,使用 setup 語法糖可以更簡潔地使用這些功能,本文將探討如何使用 ref 和 reactive 來管理狀態(tài),并解釋它們之間的區(qū)別,需要的朋友可以參考下2024-09-09
KeepAlive?是一個內(nèi)置組件，那封裝一個組件對于大家來說應(yīng)該不會有太大的困難，它的核心邏輯在于它的?render?函數(shù)，它用?map?去記錄要緩存的組件，就是?[key，vnode]?的形式，這篇文章主要介紹了Vue3?KeepAlive實現(xiàn)原理,需要的朋友可以參考下2022-09-09
解決vue項目運行提示W(wǎng)arnings while compiling.警告的問題
這篇文章主要介紹了解決vue項目運行提示W(wǎng)arnings while compiling.警告的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
elementUI組件中el-date-picker限制時間范圍精確到小時的方法
現(xiàn)在需要做一個時間選擇器,可以根據(jù)小時(同時選天和小時)和天?和月,節(jié)假日等類型控制日歷的選擇樣式,下面這篇文章主要給大家介紹了關(guān)于elementUI組件中el-date-picker限制時間范圍精確到小時的相關(guān)資料,需要的朋友可以參考下2023-04-04