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>

效果