mpvue——引入iconfont字體圖標


前言

有問題可以隨時提問,評論私信,只要我有時間我都會第一時間回復。當大家發現這篇文章不適用的時候煩請告知下,我好做好更改!

 

本地引入

下載好的字體圖標放在static目錄下,我是自己又創建了一個iconfont目錄便於區分,我是全引入的,如果后面出現問題再更改

 

引入

在App.vue中引用

@import "./../static/iconfont/iconfont.css";

 

 

 重新編譯

$ npm run build

 

使用

<div class=" iconfont icon-shouqbula">1</div>

效果

 

在線引入

這個其實就是把本地的iconfont的文件里的本地地址替換成線上的地址,好處顯而易見的是本地文件包小了,但是如果網絡不好肯定會造成暫時的iconfont丟失的情況

生成在線鏈接

進入阿里巴巴的官網,再進入到自己的項目中,如果沒有生成過在線鏈接,點下即可生成。

 

 替換鏈接

本地的iconfont的所有文件都可刪除,只留一個css的即可。

然后將復制的在線鏈接替換到本地即可。

引入

這里我們換個方法在main.js中引入,其實在main.js和APP.vue中引入,並無過大的區別。

 

main.js 是我們的程序入口文件,主要作用是初始化vue實例並使用需要的插件

App.vue是我們的主組件,頁面入口文件 ,所有頁面都是在App.vue下進行切換的。也是整個項目的關鍵,app.vue負責構建定義及頁面組件歸集。

 

 編譯

新增頁面或者文件的時候都需要重新build,如果只是改動代碼的話只需要npm run dev即可

$ npm run build

 

使用

<div class=" iconfont icon-shouqbula">1</div>

效果

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM