vue + vant 使用阿里图标库
一、下载阿里图标库至本地
二、解压之后,将文件放到assets目录下,font目录名随便起
三、main.js引入iconfont.css样式
import '@/assets/font/iconfont.css'
四、要使用某图标,打开iconfont.css文件,找到以下两个内容,只需要这两个字符串放入标签中(第一个字符串不变,第二个字符串决定你使用哪个图标)
<i class="iconfont iconyanjing" ></i> <!--运用-->
五、效果图展示
六、修改图标样式
<div class="iconfont iconPdf"></div> <!--运用-->
七、或者在阿里图标库中直接复制svg代码
效果图:
vue + vant 使用阿里图标库相关推荐
- vue 中引入阿里图标库,封装iconPicker组件
一.引入阿里图标库 1.vue项目引入阿里图标库 二.封装iconPicker组件 1.子组件 <template><el-popoverplacement="bottom ...
- vue 引入 icon(阿里图标库)
项目中,需要引入一些SVG图标,我一般都是用阿里图标库(https://www.iconfont.cn/),网上有三种步骤,我的也是其中一种,接下来记录一下,我自己用的步骤: 第一步:在阿里图标库找到 ...
- 使用在线链接阿里图标库(iconfont)(vue)
1.阿里图标库网址 https://www.iconfont.cn/ 2.搜索–>图标名称–>鼠标移入图标->加入购物车–>点击购物车–>添加至项目 2.点击Font c ...
- Vue 使用阿里图标库代替element icon
一.创建阿里图标库项目 打开网址:https://www.iconfont.cn/ ,找到[我的项目] 点击右侧文件夹[创建项目] 填写[项目名称],[FontClass]前缀填好后,后续使用icon ...
- vue中阿里图标库iconfont的设置
步骤 基本使用 1 下载存放 从阿里图标库中下载压缩包,解压开目录如下 在vue项目的assets下创建font文件夹,把这些文件复制到font文件夹下,为了有条理再创建styles文件夹,目录如下 ...
- Vue - 项目中使用iconfont(阿里图标库)
项目中如何使用iconfont(阿里图标库) 一. 登陆iconfont官网: https://www.iconfont.cn/ 二. 创建一个图标项目 1.点击"图标管理"子目录 ...
- vue+element 使用iconfont (阿里图标库)
步骤一(找到自己要引入的图标,如果已经找到只是不会引入,请直接查看步骤二): 准备:首先进入阿里图标库,登录自己的账号,在下图位置输入想搜索的图标,例如:'退出' 随便选一个自己想要的如图 把鼠标移动 ...
- Vue如何使用iconfont(阿里图标库)
1.在iconfont上任意方式登录 2.选择图标管理下,我的项目 3.新建一个项目(如果已有项目可忽略) 4.创建好之后就可以找自己要用的图标,添加到自己的项目里 5.图标添加完毕后,再次回到我的项 ...
- 下载并使用阿里图标库
一. 下载图标库 打开阿里图标库网址 https://www.iconfont.cn/,选择自己喜欢的图标,加入购物车(需要进行登录). 点开购物车图标,点击下载代码. 二.使用阿里图标库 解压下载的 ...
- antd 阿里图标库扩展a-icon 图标
vue 项目中 使用阿里图标库扩展antd 组件 icon 的图标 第一步:创建图标库 在https://www.iconfont.cn/ 创建自己的图标库,首相创建项目,然后把Svg 图标上传到该项 ...
最新文章
- java: 在相应的 try 语句主体中不能抛出异常错误java.io.IOException
- 797C C. Minimal string
- c# 泛型有什么作用?
- Python之路(第三十九篇)管道、进程间数据共享Manager
- 工控随笔_01_西门子_安装西门子软件提示重启解决方法。
- 最大权闭合图hdu3996
- SVM — 机器学习面试
- 【Level 08】U07 Mixed Feelings L4 Learning by heart
- python基础之进程、线程、协程篇
- python对象之间的关系
- JAVAEE智慧树第二次作业
- springboot1.5.x+ seata1.4.2(最新版本)+springcloud ( Edgware.SR5) +eureka+feign+mybatis-plus(最新)
- JUC并发编程基石AQS源码之结构篇-ReentrantLock
- python原始数据是什么_荐Python种MNE库模拟原始脑电数据
- 获取json文件中的URL
- ios swift收起键盘
- BSC智能分红代币合约可分其他代币|含营销钱包|通缩|回流|直接部署可用
- 优秀不够,你是否无可替代
- 服务器重装系统之浪潮服务器
- 图像传感器厂家大盘点(上)