阿里在线免费图标库的使用
本篇文章主要是阿里图表库的初始使用记录【网址】。
使用流程大概是这样的：
登录了之后，你根据项目创建一个图标库。
然后直接搜索你需要的图标，选择加入这个图标库。
在本地使用的时候，你可以吧这些图标文件下下来，或者直接在css里面使用链接，只要联网就能用了，等到本地部署的时候再下下来。
详细使用流程
1、打开网址https://www.iconfont.cn。
一进去的界面大概是这样，然后就可以直接搜索你需要的图标。
选择第一个添加到库，添加了之后，在右上角一个购物车里面就会有这个图标。将需要的图标添加好之后，点击那个购物车图标。
选择添加至项目会先提示你登录（已登录不用管）,登录后会提示你创建一个项目，选择已创建的项目，将图标添加到里面。
添加到项目中后，可以选择将图标文件下载到本地使用，也可以直接引用网络文件。
远程使用的时候，点击查看在线链接。然后再点击生成代码。
然后将这串代码复制到你本地的css文件中去，注意：在远程引用的时候需要在每个url的路径前面加一个http才能引用如： url(’//at.alicdn.com/t/font_1318125_sm3f4a6wnl.ttf’) format(‘truetype’), 需要更换为： url(‘http//at.alicdn.com/t/font_1318125_sm3f4a6wnl.ttf’) format(‘truetype’),。
本地的引用使用相对路径即可。
引用好了相应文件之后，在html页面中使用图标。
<i class="iconfont"></i>
如上就可以在页面中显示一个图标了，class在项目的配置中，可以编辑项目更换，标签里面的代码在项目中收藏的图标下面。
@快乐是一切
阿里在线免费图标库的使用相关推荐
- uni-app（一）----引入阿里云矢量图标库
这段时间因为老师要求,要做一个小程序,所以开始学一下uni-app开发,以后我会把我学的东西都发出来.现在写一下关于引入阿里云矢量图标库的方法 添加图标 首先去官网选择你喜欢的图标 你可以在这搜索你想 ...
- uniapp如何引入阿里云矢量图标库
最近搞了下uniapp的开发,写一下关于引入阿里云矢量图标库的方法: 首先说下我走过的坑吧,我直接把图标zip包下下来放在static里面,在App.vue的style中引入,保存,后面查了下,微信小 ...
- iconfont图标_除了iconfont，UI设计师还可以使用的免费图标库！
记得把我设为星标哦,不然就看不到我了 我要把国内Adobe Xd设计师的心声说出来! Adobe Xd的先天的市场资源优势真的不如Sketch,别的就不说了,就单单国内的Dapollo.Kitchen ...
- 引用阿里云矢量图标库
1.登陆http://www.iconfont.cn/ 例如我需要购物车的图标 2.按下回车后会出现一堆的购物车图标 3.喜欢那个一个就鼠标移动到图标上去,加入购物车 4点击加入购物车后,就会出现在 ...
- 微信小程序如何使用阿里妈妈iconfont图标库
1.首先进入iconfont首页,没有账号的先注册账号 http://www.iconfont.cn/ 2.选择需要的图标,加入到你的小车中 3.在这里新建一个项目将图标加进去,这个时候就可以查看并且 ...
- 使用阿里妈妈字体图标库，ie10报错，无法获取未定义或 null 引用的属性“firstChild”
前因:公司优化页面,要把彩色图片,换成字体图标. 结果:更换完后,测试发现ie10,ie9都会报错,但demo测试是没有问题的. 测试:console.log(target)为null,找到docum ...
- 计算机三级考试在线免费题库,国家三级计算机考试题库.docx
目录 200个四位数每一位都是奇数或偶数:1.3 200个四位数连续大于或连续小于以前或 大于整数m且紧靠m的k个素数:52 英文文章,替代关系f(p)=p*11 mod 256 :53- 61 英文 ...
- 盘点那些免费开源、无比精致的图标库，无论是设计还是开发，都很好用
之前分享过很多好看精致的图标库,这对日常设计和开发工作,都很方便,欢迎大家尝试. css.gg 详细介绍:https://www.thosefree.com/css-gg 一套漂亮的纯 CSS 实现的 ...
- 阿里巴巴矢量图标库项目中使用svg格式字体图标使用方式及封装
一.首先登陆阿里云矢量图标库,把需要的字体图标加入到自己的项目中 二.阿里云图标的四种方式(推荐第三种方式引入,如果不考虑网络问题可以用在线引入的方式) 进入项目以后会看到阿里云可以选择三种方式进行导 ...
最新文章
- winform 不安装字体怎么应用_Shopify怎么获取第三方应用的帮助？如何从Shopify应用商店安装的应用...
- 30212Java_数组
- C++后继有人——D语言
- 《新冠肺炎防治手册》来了！阿里巴巴联合“抗疫”一线专家发布
- ubuntu下面navicat连接本地数据库出现2003 - Can't connect to MySQL server on 'localhost'(10061 Unknown errort;)
- Exchange Server2010部署完后的配置：CA、Outlook Anywhere、OWA域名简写
- android onclick执行顺序,浅谈onTouch先执行,还是onClick执行(详解)
- 通过案例学调优之--和 LOG BUFFER 相关的主要 Latch
- import和__import__()有什么不同？
- python的N个小功能(图片预处理：打开图片，滤波器，增强，灰度图转换，去噪，二值化，切割，保存)...
- window系统怎么解压tar.bz2文件
- 账龄分析表excel模板_这种高端表格模板你会做吗？Excel制作带照片的员工信息查询表...
- python爬虫大众点评_Python爬虫丨大众点评数据爬虫教程（1）
- BAT4行代码让电脑蓝屏（无伤害）
- 嵌入式C编程中的设计模式之二——状态机模式
- php mac开启socket,mac上nginx以socket的方式连接php-fpm出现502错误？
- Qt小游戏开发：俄罗斯方块
- 数据库JDBC（知识点整理）
- 俏丽教师杂志俏丽教师杂志社俏丽教师编辑部2022年第9期目录
- 经纬度换算数值_如何在Excel中将经纬度数值转换成度分秒