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

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

將圖標加入購物車

搜索關鍵詞可以是中文也可以是英文

下載素材

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

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

文件解壓

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

方法一、本地引入

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

ttf轉base64（iconfont下載的文件已有base64轉碼，此步跳過）

transfonter

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

替換結果：

方法二、cdn引入

按項目需求，可選擇cdn方式引入字體圖標。優(yōu)點：本地文件小；缺點：網(wǎng)絡不好的情況下頁面可能會暫時缺失圖標。
在“我的項目”中，點擊查看在線鏈接，復制代碼：

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

引入css

App.vue style開頭引入：

@import '../static/iconfont.css' // 若css在static中，要加..，不然會報錯

使用字符圖標

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

注意事項

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

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

當前標題：怎么將iconfont字體圖標引入到mpvue小程序中
網(wǎng)站地址：http://chinadenli.net/article32/ggjhsc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設計公司、網(wǎng)站維護、App設計、服務器托管、域名注冊、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)