简介
阿里巴巴矢量图标库具有强大的国内功能和丰富的图标内容,提供了诸如矢量图标下载,在线存储,格式转换之类的功能。我们可以用阿里巴巴矢量图库,给网站添加更优雅的图标效果。
阿里巴巴矢量图库(iconfont.cn)是一个免费的图标库,为开发者和设计师提供了海量可编辑、多格式下载、平台兼容的高品质图标。目前平台上有150,000+多种图标,并支持SVG、EPS、AI、CDR、PNG、ICNS 格式的下载。同时支持React, Vue 等流行框架的使用。
使用阿里巴巴矢量图库的好处是:
- 图标库中包含了海量而且高品质的图标;
- 下载的图标是SVG文件,可以编辑颜色;
- 支持多平台使用(Web, iOS, Android…)。
今天我们要讨论的是如何通过阿里巴巴矢量图库和JS给网站添加更优雅的icon图标。
效果展示
阿里巴巴矢量图库官网
首先打开官网,登陆或注册账号才可以使用,搜索我们想要的图片-加入购物车-然后点击右上角的购物车按钮。
![图片[1]-阿里巴巴矢量图库,JS给网站添加更优雅icon图标-吾爱圈](https://www.52q2.com/wp-content/uploads/2022/05/image-4-1024x665.png)
然后点击右上角的购物车-添加至项目
![图片[2]-阿里巴巴矢量图库,JS给网站添加更优雅icon图标-吾爱圈](https://www.52q2.com/wp-content/uploads/2022/07/d2b5ca33bd97-1.png)
![图片[3]-阿里巴巴矢量图库,JS给网站添加更优雅icon图标-吾爱圈](https://www.52q2.com/wp-content/uploads/2022/07/d2b5ca33bd97-2.png)
调用方法
![图片[4]-阿里巴巴矢量图库,JS给网站添加更优雅icon图标-吾爱圈](https://www.52q2.com/wp-content/uploads/2022/07/d2b5ca33bd97-4-1024x590.png)
到我的项目里把图标下载到本地,然后把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