阿里巴巴矢量图标库使用

news2024/11/23 1:55:56

阿里巴巴矢量图标库官网

添加图标到购物车

悬浮到图标上面会有个购物车icon,点击一下就可以添加购物车了
在这里插入图片描述

添加图标到项目

添加完购物车后,右上角会有当前在购物车的数量,点击右上角购物车icon,在新弹窗内点击添加至项目,选择添加到哪个项目(没有项目就创建一个),点击完成,就可以把全部图标添加到项目里面了
在这里插入图片描述
添加项目完成后会跳转新页面,也就是添加的项目的页面，点击当前页面的暂无代码，点击生成(如果当前项目已经有文件了,则会有点击更新代码提示,点击一下即可生成)就会生成带有在线字体图标链接的css代码，点击复制，然后我们添加的字体图标下面都会有一个UniCode编码，点击复制编码，就是当前的图标

字体图标css代码大概如下

/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
   
  font-family: 'iconfont';  /* Project id 4607808 */
  src: url('//at.alicdn.com/t/c/font_4607808_rrlua6l10l.woff2?t=1719979376928') format('woff2'),
       url('//at.alicdn.com/t/c/font_4607808_rrlua6l10l.woff?t=1719979376928') format('woff'),
       url('//at.alicdn.com/t/c/font_4607808_rrlua6l10l.ttf?t=1719979376928') format('truetype');
}