前言
有問題可以隨時提問,評論私信,只要我有時間我都會第一時間回復。當大家發現這篇文章不適用的時候煩請告知下,我好做好更改!
本地引入
下載好的字體圖標放在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>
效果