VUE项目使用iconfont-阿里巴巴矢量图标

VUE项目使用iconfont-阿里巴巴矢量图标

平常使用ui框架自带的icon图标并不能满足我们的项目需求时，借助iconfont-阿里巴巴矢量图标能很好的解决。

首先，去iconfont官网登录，因为项目的变更icon图标可能需要替换或者新增的情况，创建项目，并将需要的icon图标存储是最好的：

接下来，就可以寻找适合自己开发需求的icon图标了；并挑选入刚才自己创建的项目库中，这边随便挑选几个做案例：

添加完成后，在顶部我的项目中，看到刚才添加的icon图标；分别有Unicode、Font class、Symbol等引入方式，这里我们用最常用的Font Class方式引入，因为它的兼容性更好。通过本地下载放置项目中、以及线上加载到此icon文件入口，这里就看自身需求吧，更推荐下载至本地的方式来完成。

下载完成后，此时里面会有一大堆文件，找到我们需要的：

进入我们的vue项目，博主的项目是Vue-CLi3.0以上版本搭建的，可能目录结构会不一样，一般放在静态资源目录即可。
在src/assets/创建icon文件夹，把我们刚才需要的五个文件复制进去：

我们在main.js入口文件中：

//使用绝对路径引入iconfont.css
import "@/assets/icon/iconfont.css"

以上操作都完成后，在任意标签加入，：

//注意icon是不受父标签样式影响的，需要直接控制其自身
 <div class="home" style="font-size:25px">
    <span>icon图标>>></span>
    //类名iconfont是必须有的，后为官网的图标名称
    <span style="color:red;font-size:25px" class="iconfont iconlove"></span>
  </div>

注意：加入iconfont的标签是不受父标签样式影响的，需要直接控制其自身

接下来看看效果：

微薄之力，如有帮助到各位伙伴们，点个小赞吧！