iconfont阿里巴巴矢量图标库使用步骤
iconfont阿里巴巴矢量图标库使用步骤
1.注册账号
2.选中图标,添加到购物车
点击购物车,将图标添加到项目
3.在我的项目中,点击下载至本地
4.解压download.zip压缩包,并将解压出来的文件名改成font
5.将font文件夹添加到项目中
6.在style中插入如下代码
@font-face {font-family: 'iconfont';src: url('./font/iconfont.woff2?t=1635864529995') format('woff2'),url('./font/iconfont.woff?t=1635864529995') format('woff'),url('.font/iconfont.ttf?t=1635864529995') format('truetype');
}
.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
7.使用图标的话,先使用这个样式class=“iconfont”,如果图标过小,可以在加一个aa样式。
然后使用图标的代码即可。
8.运行html,浏览器中看效果
iconfont阿里巴巴矢量图标库使用步骤相关推荐
- 码神之路博客系统更换个人卡片图标(iconfont 阿里巴巴矢量图标库的使用)
目录 个人卡片图标 更换步骤 1.前往iconfont 阿里巴巴矢量图标库官网,并且注册账号: 2.点击资源管理下的我的项目: 3.点击新建项目: 4.新建项目之后,在搜索框搜索想要的图标素材(例如Q ...
- 使用iconfont阿里巴巴矢量图标库(最方便的使用方法)
使用iconfont阿里巴巴矢量图标库(最方便的使用方法) https://www.iconfont.cn/阿里巴巴矢量图标库 看着挺多的,仔细看内容并不多.图文并茂哦! 第一步:登陆后.喜欢哪个放到 ...
- 阿里巴巴矢量图标库使用步骤
1.登陆官网,选择需要的图标,将其添加至项目,然后下载至本地. 2.解压文件. 3.在工程目录下新建CSS文件夹,在CSS文件夹之后新建iconfont文件夹,并且将下面四个文件复制在CSS/icon ...
- iconfont阿里巴巴矢量图标库的使用
1.图标资源下载 (1)登录阿里巴巴矢量图标库 (2)选择要使用的图标添加到项目 (3)点击下载到本地 2.在项目中引入 (1)将压缩包解压后加入项目指定目录下 (2)在main.js中引入 impo ...
- 三种方式在HTML使用阿里字体图标--iconfont阿里巴巴矢量图标库
好久没用到阿里巴巴的图标,突然要用到就发现不会用了,只会导出png格式的图标png了= = 目录 1.字体图标 方法一.本地使用通过类名使用阿里矢量图标 1.把图标添加入库 2.把图标添加到项目 3. ...
- 如何把Iconfont阿里巴巴矢量图标库引入web项目和微信小程序中,拿走不谢
登录Iconfont-阿里巴巴矢量图标库 官文地址:https://www.iconfont.cn/ ①必须登录才行,我这边是用新浪微博登录的 ②然后可以搜索自己需要的图标,比如搜索homt,然后鼠标 ...
- Vue3 第十篇Plus:使用iconfont阿里巴巴矢量图标库
目录 一.将需要的图标加入购物车编辑 二. 进入购物车并加入项目 三.配置参数 四.下载本地并解压编辑编辑 五.引入项目 六.修改inconfont.css文件,将默认名称修改成咱们自己的前缀 ...
- iconfont阿里巴巴矢量图标库本地下载的使用
今天使用iconfont应用在vue3项目发现不能在线链接使用,无耐只能下载到本地了. 选取需要的图标添加入库(小小车车变红就可以),然后添加到项目,然后就是下载啦.我这里使用的是unicode 下载 ...
- 【uni-app怎么引用使用阿里巴巴矢量图标库iconfont】
uni-app引用使用阿里巴巴矢量图标库iconfont 1.新建文件(看了好几篇使用说明和官方说明总结出来的用法) 首先右击项目新建一个目录common和pages同级,右击common文件夹新建一 ...
- 2017 阿里巴巴矢量图标库 导入所选图标到jsp页面步骤
阿里巴巴矢量图标库 导入所选图标到jsp页面步骤,给新手看的,自己也是第一次使用,希望对其他人有帮助,因为看到网站很多博客,都说的不是很清楚,避免有人走弯路. 1.需要注册一个github账号: 登陆 ...
最新文章
- 读博难?DeepMind科学家Ruder提出读博/做研究的十条锦囊
- Linux IPC实践(8) --共享内存/内存映射
- gcc 无法编译问题解决
- 使用.NET Core创建Windows服务(一) - 使用官方推荐方式
- WinForm中DataGridView的TextBoxColumm换行
- Hibernate里面session.get()和session.load()的区别
- 华中科技大学计算机专业培养计划,2021年华中科技大学计算机科学与技术专业本科人才培养方案.doc...
- 分布式数据库架构及企业实践--基于Mycat中间件pdf
- SQL经典练习题及答案
- 【解决】updateAppMessageShareData:fail, the permission value is offline verifying
- 三十一 我在软件园的那些日子里
- Far planner之 障碍物的图搜索
- 移动光猫怎么设置虚拟服务器设置,移动光纤怎么设置无线路由器?
- Linux/ Unix 键盘检测程序
- IP问问区县级别IP地址库---使用帮助(上篇)
- boss是董卓的java游戏_武将列传世界BOSS董卓-殒命长安攻略
- vscode安装插件以及配置anaconda
- 痛心!又一中产家庭倒下,为什么我建议你不要轻易买保险?
- Scaner VS bufferedReader
- Docker 部署在线文件转换服务--Libre Office Online
热门文章
- Linux V4L2 框架分析
- 利用matlab实现卷积实验报告,matlab卷积实验报告(共8篇).doc
- Java获取姓名的首字母_java获取中文拼音首字母的实例
- Android8.1根据app名字调用显示app的属性页(App info)
- 使用dea-toolbox进行数据包络分析
- tuxedo中间件tmadmin的命令使用
- cad尺寸标注快捷键_CAD快速标注方法你知道几种?
- 中美线径对照表_美标线径与国标对照及导线介绍
- 步进电机 迷你L298N 2路直流电机驱动模块 正反转 PWM调速 双H桥
- 一、全国计算机三级数据库考试——理论知识总结(选择题)