9、阿里巴巴矢量图库icon-font的运用

简介: 前言:今天说下在项目中的使用图标库GitHub:https://github.com/Ewall1106/mall一、新建图标项目1、打开阿里巴巴矢量图库这个网站,进入图标管理中,在里面新建一个项目iconfont官网2、然后...

前言:今天说下在项目中的使用图标库
GitHub:https://github.com/Ewall1106/mall

一、新建图标项目

1、打开阿里巴巴矢量图库这个网站,进入图标管理中,在里面新建一个项目

img_b4a22479f0b3996098264111daa6828b.png
iconfont官网

2、然后我们进入图标库中添加几个图片到购物车中

img_ff5e9d55a8e7cb69c68a97ba064aee44.png
addCart

3、然后在购物车中将图标添加到项目里面

img_b10d1132fde156c4cd8da7357cb83af9.png
添加到项目

二、下载图标到本地

进入我的项目中,然后下载到本地;
这里有三种不同的方式下载,区别大家可以到官网里面了解更多;

img_de63f2f63732c3c2e78cea44b57e52a7.png
download

三、项目中引入

1、ok,下载完成了以后,除了iconfont.js字体文件对我们没有什么用以外,我们把所有的iconfont复制一下。

img_fc0e4884f5515d7fdd2d445d7855bcee.png
iconfont

2、全部复制到styles目录下

img_c24a2f54734953c89a91778ccf0551df.png
styles

3、然后我们到main.js中全局引入一下
只要引入iconfont.css就可以了

img_c4cd5c3d948dcb5969a00662d4433a06.png
main.js

为什么我们这里路径直接以styles开头的,因为我们在webapck.base.conf.js中的alias中配置下路径,这个细节在前面章节有讲,这里再提一下。

四、使用

1、我们在项目中用一下,随便找个页面,随便写个标签,但class类名要为iconfont

img_209e46fc24af096bd020edb1d18959dc.png
使用

2、span里面的包裹的十六进制码去网站里面拿

img_64de46f8aa2669bfec8ea54d4a092dc9.png
我的项目

3、引入成功没?

img_560f51420467e1fe2ad3408f1a613b37.png
浏览器中查看

ok。

参考学习

https://www.jianshu.com/p/03172908d344
http://www.iconfont.cn

目录
相关文章
|
Web App开发 人工智能 Android开发
iconfont.cn 阿里出品的矢量图标库
Iconfont.cn是阿里巴巴推出的矢量图标库,其中涵盖了1000多个常用图标,并在持续更新中。(目前已有7000+图标,部分图标为用户上传,因此默认不公开,但是可以搜索到。)
15829 0
iconfont.cn 阿里出品的矢量图标库
|
XML JSON JavaScript
如何在js中,读取json文件?
如何在js中,读取json文件?
|
容器
layui下拉多选框xm-select.js插件的使用
layui下拉多选框xm-select.js插件的使用
1618 0
|
3月前
|
存储 弹性计算 人工智能
阿里云特价服务器选购攻略:轻量云服务器抢购与云服务器特惠区别与选择指南参考
2026年阿里云为不同预算用户提供了多层次的特价云服务器方案。轻量应用服务器主打极致性价比,38元/年(2核2G/200M带宽)和9.9元/月起(2核4G/200M带宽)两款限时抢购,适合个人建站、开发测试及AI应用快速部署。云服务器ECS则提供99元/年经济型e实例(2核2G/3M固定带宽)和199元/年通用算力型u1实例(2核4G/5M固定带宽),均支持新购续费同价,适合企业长期稳定运行。
阿里云特价服务器选购攻略:轻量云服务器抢购与云服务器特惠区别与选择指南参考
|
3月前
|
弹性计算 人工智能 缓存
阿里云服务器购买价格参考:特价云服务器与活动价3000元至5000元实例配置和价格
2026年阿里云面向3000-5000元预算用户提供了丰富的云服务器选择。入门层有轻量应用服务器38元/年、ECS经济型e实例99元/年及u1实例199元/年,适合个人开发者和初创企业。中高配层面,经济型e实例(4核16G)约3215元/年,通用算力型u2i实例(4核32G)约2617元/年,九代实例c9i(4核8G)约3147-4187元/年、g9i(4核16G)约3180-4984元/年,满足高性能计算、数据库、大数据等场景需求。
|
SQL 关系型数据库 网络安全
Navicat Premium 17 最新版下载与配置:5分钟完成企业级数据库工具部署
Navicat Premium 17 是一款支持多种主流数据库(如 MySQL、Oracle、PostgreSQL 等)的多数据库管理工具,提供可视化数据建模、SQL 编辑和数据同步等功能。试用版提供 14 天全功能体验,商业版支持跨平台使用。安装环境要求 Windows 10/11 或 macOS 12.0+,最低配置为 4GB 内存。下载并解压安装包后,按步骤启动安装程序、接受许可协议、自定义安装路径并完成安装。首次运行时需激活许可证并配置数据库连接。常见问题包括无法写入注册表、试用期续费及连接数据库权限问题。高级功能涵盖 SSH 通道加速、自动化任务调度和性能调优建议。
6250 20
|
存储 安全 算法
陪玩系统功能 陪玩平台 陪玩系统用户体验 陪玩系统安全性 陪玩系统开发
陪玩系统旨在为用户寻找合适的陪玩者,提供注册登录、资料展示、搜索匹配、预约支付、实时沟通及评价反馈等功能。平台拥有丰富的陪玩资源,便捷的预约流程,安全的支付环境和良好的用户体验。系统通过优化算法、提升沟通效率、丰富服务内容和建立社区互动来提升用户体验。安全性方面,系统采用数据加密、防火墙、支付安全和实名认证等措施。开发过程包括需求分析、系统设计、前后端开发、测试优化和上线推广。
1371 2
|
网络架构
网络拓扑
【8月更文挑战第19天】网络拓扑
2348 1