阿里巴巴矢量图库,JS给网站添加更优雅icon图标

简介

阿里巴巴矢量图标库具有强大的国内功能和丰富的图标内容,提供了诸如矢量图标下载,在线存储,格式转换之类的功能。我们可以用阿里巴巴矢量图库,给网站添加更优雅的图标效果。

阿里巴巴矢量图库(iconfont.cn)是一个免费的图标库,为开发者和设计师提供了海量可编辑、多格式下载、平台兼容的高品质图标。目前平台上有150,000+多种图标,并支持SVG、EPS、AI、CDR、PNG、ICNS 格式的下载。同时支持React, Vue 等流行框架的使用。

使用阿里巴巴矢量图库的好处是:

  1. 图标库中包含了海量而且高品质的图标;
  2. 下载的图标是SVG文件,可以编辑颜色;
  3. 支持多平台使用(Web, iOS, Android…)。

今天我们要讨论的是如何通过阿里巴巴矢量图库和JS给网站添加更优雅的icon图标。

效果展示

阿里巴巴矢量图库官网

首先打开官网,登陆或注册账号才可以使用,搜索我们想要的图片-加入购物车-然后点击右上角的购物车按钮。

图片[1]-阿里巴巴矢量图库,JS给网站添加更优雅icon图标-吾爱圈
阿里巴巴矢量图库

然后点击右上角的购物车-添加至项目

图片[2]-阿里巴巴矢量图库,JS给网站添加更优雅icon图标-吾爱圈
图片[3]-阿里巴巴矢量图库,JS给网站添加更优雅icon图标-吾爱圈

调用方法

图片[4]-阿里巴巴矢量图库,JS给网站添加更优雅icon图标-吾爱圈
我的项目

到我的项目里把图标下载到本地,然后把iconfont.js连接到自己的网站-例如下面

<script src="https://www.52q2.com/wp-content/themes/wuaiquan/js/iconfont.js"></script>

这样你就能通过代码调用图标了

<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xiangsu_fangzi"></use></svg>
© 版权声明
THE END
喜欢就支持一下吧
点赞13赞赏 分享