前言
本文主要是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含义在
我的项目
中可以查看
- 图标上点击复制代码,可以更便捷使用