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>

效果