当前位置:   article > 正文

阿里巴巴矢量图标库使用_在线链接服务仅供平台体验和调试使用

在线链接服务仅供平台体验和调试使用

阿里巴巴矢量图标库官网

添加图标到购物车

悬浮到图标上面会有个购物车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');
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

在这里插入图片描述

新建项目

新建空文件夹即可
创建/font/iconfont.

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号