iconfont的使用(详细介绍)

简介: iconfont的使用(详细介绍)

今天看iconfont的使用视频,有点断片,记得基础班没有讲过,可能是资源丢掉了,总结一下使用过程。


下面是网站地址


https://www.iconfont.cn/


使用需要登录账号,可以使用github或者微博账号登录,在右上角第一个小图标。


1.png


2. 选择自己需要的图标,先随便选中一个进行演示。(引入下面的资源)


2.png


点进去之后,鼠标移动上去,点击购物车图标


3.png


这样子的话,右上角的购物车里面就会显示出数量


4.png


3. 选择完毕之后,就点击一下小购物车


5.png


选择添加到项目(第一次使用的话需要新建一个项目,根据自己的需求制作就可以)


6.png


点击之后就会跳转到下面网页


7.png


4. 选择下载至本地,之后进行解压处理。


8.png9.png


新建一个文件夹,将解压好的文件夹放入进去,之后新建的文件夹用哪个vscode打开。


10.png


5. 同级建一个.html文件


11.png


引入.css文件


<link rel="stylesheet" href="./font_2764063_nwtt8o6lbc/iconfont.css">

12.png


写图标类名:复制代码


13.png


写入类名(第一个必须是.iconfont 第二个是自己选的图标)


14.png


测试


15.png


演示2


16.png

17.png

补充:修改颜色+大小


18.png19.png

相关文章
|
Web App开发 人工智能 Android开发
iconfont.cn 阿里出品的矢量图标库
Iconfont.cn是阿里巴巴推出的矢量图标库,其中涵盖了1000多个常用图标,并在持续更新中。(目前已有7000+图标,部分图标为用户上传,因此默认不公开,但是可以搜索到。)
14163 0
iconfont.cn 阿里出品的矢量图标库
|
SQL 存储 数据库
基于Web技术的在线考试系统的设计与实现(论文+源码)_kaic
基于Web技术的在线考试系统的设计与实现(论文+源码)_kaic
|
运维 监控 Java
使用jps命令查看Java进程
`jps`是Java开发者和系统管理员的得力助手,它简化了Java进程监控的过程,使得快速检查应用运行状态变得轻而易举。通过合理利用其提供的参数,可以高效地进行故障排查、性能监控及日常管理任务,确保Java应用稳定运行。
1764 2
|
JavaScript
vue项目中引入阿里图标iconfont
该文章指导如何在Vue项目中引入并使用阿里图标库Iconfont,包括图标的选取、下载配置文件及在项目中引入和使用图标的具体步骤。
|
移动开发 缓存 Dart
Pad大屏&Flutter多引擎适配之路
# 背景 在电商场景中iPad的大屏拥有比普通手机相比更大的屏幕,对于购物体验而言,如能充分利用好iPad的大屏体验,无疑提高用户购买体验,但一直以来在混合栈应用特别是Flutter混合栈中,在iPad大屏适配和Flutter多引擎适配都是个老大难问题。本文会介绍闲鱼在这iPad适配中的各个疑难点。 # 分屏模式 华为,oppo等厂商折叠屏的方案。界面会在展开和折叠时展示不同的视图样式。op
1293 0
Pad大屏&Flutter多引擎适配之路
|
安全 数据安全/隐私保护
超简单,让别人也能访问到你的Dash应用
超简单,让别人也能访问到你的Dash应用
636 2
|
缓存 C++
hooks-riverpod 使用
hooks-riverpod 使用
|
JavaScript 前端开发 安全
XSS Challenges 通关解析
XSS Challenges 通关解析
|
SQL Java 数据库连接
Spring Boot联手MyBatis,打造开发利器:从入门到精通,实战教程带你飞越编程高峰!
【8月更文挑战第29天】Spring Boot与MyBatis分别是Java快速开发和持久层框架的优秀代表。本文通过整合Spring Boot与MyBatis,展示了如何在项目中添加相关依赖、配置数据源及MyBatis,并通过实战示例介绍了实体类、Mapper接口及Controller的创建过程。通过本文,你将学会如何利用这两款工具提高开发效率,实现数据的增删查改等复杂操作,为实际项目开发提供有力支持。
1457 0
|
Web App开发 前端开发 JavaScript
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
973 1

热门文章

最新文章