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阿里巴巴矢量图标库使用步骤相关推荐

  1. 码神之路博客系统更换个人卡片图标(iconfont 阿里巴巴矢量图标库的使用)

    目录 个人卡片图标 更换步骤 1.前往iconfont 阿里巴巴矢量图标库官网,并且注册账号: 2.点击资源管理下的我的项目: 3.点击新建项目: 4.新建项目之后,在搜索框搜索想要的图标素材(例如Q ...

  2. 使用iconfont阿里巴巴矢量图标库(最方便的使用方法)

    使用iconfont阿里巴巴矢量图标库(最方便的使用方法) https://www.iconfont.cn/阿里巴巴矢量图标库 看着挺多的,仔细看内容并不多.图文并茂哦! 第一步:登陆后.喜欢哪个放到 ...

  3. 阿里巴巴矢量图标库使用步骤

    1.登陆官网,选择需要的图标,将其添加至项目,然后下载至本地. 2.解压文件. 3.在工程目录下新建CSS文件夹,在CSS文件夹之后新建iconfont文件夹,并且将下面四个文件复制在CSS/icon ...

  4. iconfont阿里巴巴矢量图标库的使用

    1.图标资源下载 (1)登录阿里巴巴矢量图标库 (2)选择要使用的图标添加到项目 (3)点击下载到本地 2.在项目中引入 (1)将压缩包解压后加入项目指定目录下 (2)在main.js中引入 impo ...

  5. 三种方式在HTML使用阿里字体图标--iconfont阿里巴巴矢量图标库

    好久没用到阿里巴巴的图标,突然要用到就发现不会用了,只会导出png格式的图标png了= = 目录 1.字体图标 方法一.本地使用通过类名使用阿里矢量图标 1.把图标添加入库 2.把图标添加到项目 3. ...

  6. 如何把Iconfont阿里巴巴矢量图标库引入web项目和微信小程序中,拿走不谢

    登录Iconfont-阿里巴巴矢量图标库 官文地址:https://www.iconfont.cn/ ①必须登录才行,我这边是用新浪微博登录的 ②然后可以搜索自己需要的图标,比如搜索homt,然后鼠标 ...

  7. Vue3 第十篇Plus:使用iconfont阿里巴巴矢量图标库

    目录 一.将需要的图标加入购物车​编辑 二. 进入购物车并加入项目 三.配置参数 四.下载本地并解压​编辑​编辑 五.引入项目 六.修改inconfont.css文件,将默认名称修改成咱们自己的前缀 ...

  8. iconfont阿里巴巴矢量图标库本地下载的使用

    今天使用iconfont应用在vue3项目发现不能在线链接使用,无耐只能下载到本地了. 选取需要的图标添加入库(小小车车变红就可以),然后添加到项目,然后就是下载啦.我这里使用的是unicode 下载 ...

  9. 【uni-app怎么引用使用阿里巴巴矢量图标库iconfont】

    uni-app引用使用阿里巴巴矢量图标库iconfont 1.新建文件(看了好几篇使用说明和官方说明总结出来的用法) 首先右击项目新建一个目录common和pages同级,右击common文件夹新建一 ...

  10. 2017 阿里巴巴矢量图标库 导入所选图标到jsp页面步骤

    阿里巴巴矢量图标库 导入所选图标到jsp页面步骤,给新手看的,自己也是第一次使用,希望对其他人有帮助,因为看到网站很多博客,都说的不是很清楚,避免有人走弯路. 1.需要注册一个github账号: 登陆 ...

最新文章

  1. 读博难?DeepMind科学家Ruder提出读博/做研究的十条锦囊
  2. Linux IPC实践(8) --共享内存/内存映射
  3. gcc 无法编译问题解决
  4. 使用.NET Core创建Windows服务(一) - 使用官方推荐方式
  5. WinForm中DataGridView的TextBoxColumm换行
  6. Hibernate里面session.get()和session.load()的区别
  7. 华中科技大学计算机专业培养计划,2021年华中科技大学计算机科学与技术专业本科人才培养方案.doc...
  8. 分布式数据库架构及企业实践--基于Mycat中间件pdf
  9. SQL经典练习题及答案
  10. 【解决】updateAppMessageShareData:fail, the permission value is offline verifying
  11. 三十一 我在软件园的那些日子里
  12. Far planner之 障碍物的图搜索
  13. 移动光猫怎么设置虚拟服务器设置,移动光纤怎么设置无线路由器?
  14. Linux/ Unix 键盘检测程序
  15. IP问问区县级别IP地址库---使用帮助(上篇)
  16. boss是董卓的java游戏_武将列传世界BOSS董卓-殒命长安攻略
  17. vscode安装插件以及配置anaconda
  18. 痛心!又一中产家庭倒下,为什么我建议你不要轻易买保险?
  19. Scaner VS bufferedReader
  20. Docker 部署在线文件转换服务--Libre Office Online

热门文章

  1. Linux V4L2 框架分析
  2. 利用matlab实现卷积实验报告,matlab卷积实验报告(共8篇).doc
  3. Java获取姓名的首字母_java获取中文拼音首字母的实例
  4. Android8.1根据app名字调用显示app的属性页(App info)
  5. 使用dea-toolbox进行数据包络分析
  6. tuxedo中间件tmadmin的命令使用
  7. cad尺寸标注快捷键_CAD快速标注方法你知道几种?
  8. 中美线径对照表_美标线径与国标对照及导线介绍
  9. 步进电机 迷你L298N 2路直流电机驱动模块 正反转 PWM调速 双H桥
  10. 一、全国计算机三级数据库考试——理论知识总结(选择题)