阿里巴巴矢量图标库使用在线字体图标

本文聚焦前端字体图标使用。介绍命名规则,初始化图标名若为拼音需改成合适英文,修改后要重新生成并引入链接,保存时点击保存而非保存为副本。还说明了引入在线链接到前端public/index.html,以及单色和多色图标的使用与样式修改方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

官网

 

 

  1. 字体图标的使用

2.1关于命名:初始化的icon名称都是拼音,大家需要改成合适的命名,如果在使用过程中发现icon名是拼音,你们就改过来。如果已经是英文,说明别人改过了,你直接用就行。

注意每次修改图标名称后都需要重新改一下生成并引入链接。注意:点击保存的时候,是点击保存,不要点击保存为副本。保存为副本会复制一个图标出来。

2.2.引入在线链接,先一下链接地址复制,然后然后放到前端public/index.html中引入,

引入js和css链接,只是文件名不一样而已

2.3icon的使用。

对于单色图标可以这样写,

<i class="lea-icon lea-icon-file-word"></i>

如果要修改样式,把它当做字体这样子写样式就可以了

.;ea-icon-file-word{

font-size:14px;

color:“#eeeeee”

}

如果是多色图标,则需要这样写

<svg class="lea-icon">

<use xlink:href="#lea-icon-file-word"></use>

</svg>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值