Vue项目引入阿里巴巴矢量图标库

添加图标并下载

一、点击图标管理-->我的项目，创建项目

image
简单点~填个项目名即可
image

二、选择一个图标，加入购物车

image

点击右上角购物车的图标，添加至项目(可以直接点击下载代码，不需要创建项目，但是如果是项目有很多图标，需要后续管理，还是要创建项目)，然后回到第一步中的我的项目，点击下载至本地

image image image

在vue项目中使用

一、引入项目

解压缩下载好的项目，复制到项目中（我的目录是src/assets/iconfont，删除demo开头的文件）

image

二、在main.js引入

...
import Vue from "vue";
import App from "./App.vue";
import "./assets/iconfont/iconfont.css"; //引入阿里巴巴矢量图标库
...

三、代码中使用

iconfont.css

//icon名称在下载的文件夹中的iconfont.css中
.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-denglu:before { content: "\e611"; }

使用

<i class="iconfont icon-denglu"></i>