前言

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

Vue使用iconfont图标相关推荐

vue引用iconfont图标
1.把图标下载到本地解压,把里边的文件拷贝到static下(建议新建一个asstes文件夹专门存放,文件目录如下) 2.打开iconfcont.css修改url,把data开头的删除了,不然会报错 3 ...
VUE如何引入iconfont图标来使用
对做前端界面的开发者来说,做各类界面的时候需要用到图标,这里说下如何在VUE中引用iconfont图标来使用,以引入阿里的iconfont图标为例. 一.首先访问https://www.iconfon ...
vue项目引入彩色iconfont图标
做项目的时候经常会使用到iconfont图标库,在项目开始的时候提前想好需要什么图标,最好是多下载几个可替换的同类型图标,宁滥勿缺(别问,问就是得到了教训),无色的还是彩色的,这点很重要. 首先了解一 ...
VUE在线调用阿里Iconfont图标库
前言多年前我本是个服务端小白,随着行业内卷,硬是被熬成了前端小白...开个玩笑,只是个人比较喜欢学习技术罢了!本章将带领大家以另一个高端的方式打开阿里Iconfont图标库,过去,我们要么是自己在网 ...
vue项目集成iconfont 图标
引入阿里iconfont 图标首先我们打开 iconfont官网,注册登录之后点击导航栏上的图标管理 - 我的项目: 进入项目之后,点击新建项目随便添加一个图标到新建好的项目中,并且生成 CSS ...
vue项目中使用阿里iconfont图标(下载并在本地引用)
vue项目中使用阿里iconfont图标(下载并在本地引用) step1 step2 step3 在scr/asstets/css目录下新建icons文件夹,把图中所需要的四个文件放进去即可记得在m ...
vue引入阿里巴巴iconfont图标(简单易懂)
vue引入并使用阿里巴巴iconfont图标流程为什么要使用阿里图标库: 有些时候你需要的图标是真的在elementul里没有的或者完全不适合的. 这时候我们需要去到阿里的图标库里找找,这里的图标非 ...
vue项目中如何使用阿里 iconfont图标
先登录阿里 iconfont 图标库:https://www.iconfont.cn/ 1.选择需要的图标添加到购物车中 2.在资源管理里面 --我的项目: 添加新项目这样的话就会永久保存了. 3. ...
如何在uni-app中引入iconfont图标
如何在uni-app中引入iconfont图标 step1 在iconfont中找到你要的图标,这里和vue其他地方引用的步骤一致,如果是第一次使用iconfont请自行百度使用方法,因为我一直使用的 ...
el-select 内如何渲染彩色IconFont图标
el-select 内如何渲染彩色IconFont图标导入 Let's go 1.IconFont 引入方式 2.开始导入 3.注册通用组件 4.好像跑题了 5.el-select中渲染IconFo ...

Vue使用iconfont图标

文章目录

前言

一、批量下载iconfont

1.创建一个项目

2.批量加入购物车

二、在Vue中使用

1.准备工作

2.使用

Vue使用iconfont图标相关推荐

最新文章

热门文章