Vue使用iconfont图标

---

前言

本文主要是iconfont图标批量下载，以及使用到vue中。

---

一、批量下载iconfont

1.创建一个项目

• 打开网站iconfont，登陆，顶部菜单打开【资源管理】–>【我的项目】–>【新建项目】
• 填写项目名字，其他默认

2.批量加入购物车

• 使用谷歌浏览器打开自己喜欢的图标页面，右键检查，在检查面板``console`中输入代码

var list = document.querySelectorAll('.icon-gouwuche1');
for(var i = 0; i < list.length; i++) {
	list[i].click();
}

该代码目的是批量点击图标上购物车按钮，从而加入到购物车，如果不全部加入，单个点击加入购物车也是可以的

• 打开购物车，点击加入项目（刚才创建的项目）
• 打开我的项目，选择 Font class，点击下载至本地
  

二、在Vue中使用

1.准备工作

• 将其中4个文件拷贝到Vue项目中
  

• 在main.js中引入

import '@/static/css/iconfont.css'

• 路径改成自己的
• @代表src目录

2.使用

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

• iconfont类先写
• 具体Icon含义在我的项目中可以查看
  
• 图标上点击复制代码，可以更便捷使用