阿里巴巴字体图标库iconfont使用步骤

本文介绍了如何使用阿里巴巴图标库Iconfont,包括注册登录、选择图标、新建项目、下载图标以及在项目中通过Symbol方式引入图标的详细步骤。支持中英文搜索,适合多色图标,并提供了浏览器兼容性和调整样式的说明。

首先给出阿里妈妈图标库官方网址:http://www.iconfont.cn/
然后选择一个账号注册并登陆:
在这里插入图片描述
登陆成功之后就可以选择自己想要的图标了(支持中英文查找,很智能哦):
在这里插入图片描述
点击购物车,会出现下图,然后新建一个现在自己在做的项目
在这里插入图片描述
在这里插入图片描述
下载到本地之后点击:
在这里插入图片描述
我在项目中是选择Symbol的方式引入的,操作方法如下:

Symbol 引用
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:

支持多色图标了,不再受单色限制。
通过一些技巧,支持像字体那样,通过 font-size, color 来调整样式。
兼容性较差,支持 IE9+,及现代浏览器。
浏览器渲染 SVG 的性能一般,还不如

### 阿里巴巴矢量图标库简介 阿里巴巴矢量图标库Iconfont)是一个提供丰富图标资源的平台,拥有大量免费图标资源。该平台不仅支持多种格式如SVG、Font等,还允许开发者轻松地将这些图标集成到项目中[^4]。 ### 使用步骤详解 #### 创建账户与项目 访问[Iconfont官网](https://www.iconfont.cn/)并完成账号注册流程。登录后,在个人中心创建新项目,并为其指定名称以便管理[^3]。 #### 图标选取与配置 进入素材库页面浏览所需图标,选中的图标可通过点击“加入购物车”按钮收集起来。之后可以在购物车内统一操作所选图标,比如调整尺寸或颜色等个性化设置。 #### 获取代码片段 对于已选定的图标集,可以选择不同的使用方式来获取相应的HTML/CSS代码: - **字体类图标**:适合Web端开发,默认推荐选项; - **PNG/SVG图片链接**:适用于静态展示场景; - **Symbol模式**:更灵活的选择,尤其当需要频繁更新时更为便捷; 每种方法都有详细的说明文档指导具体实施过程。 ```html <!-- 字体类图标的引入 --> <link rel="stylesheet" href="//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css"> <i class="iconfont"></i> ``` ```javascript // ECharts 中应用自定义符号 option = { xAxis: {}, yAxis: {}, series: [{ symbolSize: 20, symbol:'path://M10...z',// 自定义路径字符串来自Iconfont导出 data: [[10.0, 8.04], ...], type: 'scatter' }] }; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值