1.首先进入阿里图标库
http://www.iconfont.cn/
2.如下图所示，将选中的图标添加到购物车
在这里插入图片描述
3.点击购物车，然后出现下图，点击添加到项目后选中需要添加到的项目即可
在这里插入图片描述
4.进入项目，复制下图红字链接打开网页(注意去除前面的两个斜杠//)，将网页中的代码全部复制下来
在这里插入图片描述
5.在微信开发者工具中创建一个文件夹iconfont和iconfont.wxss文件，如下图样式，并将复制的代码全部粘贴进去
在这里插入图片描述
6.在app.wxss中引用iconfont.wxss文件，记得路径写正确，至此结束，就可以引用在网页上添加过的图标啦，下面举个小例子
在这里插入图片描述
比如我们要在wxml中使用这个图标，点击复制代码，将icon iconfont后的一项替换掉即可
在这里插入图片描述
wxml中代码如下，icon-eye-off为图标名，之前的icon iconfont为固定格式
<i class="icon iconfont icon-eye-off></i>
1.首先进入阿里图标库http://www.iconfont.cn/ 2.如下图所示，将选中的图标添加到购物车 3...
最近在研究微信小程序，发现他自带的icon有点少，就去阿里矢量图标库里找了几套库扔进去，发现显示不出来。。。 研究...
1.资料： 01:微信小程序引用 02:阿里巴巴矢量图库 2.前言 weui是一套同微信原生视觉体验一致的基础样式...
1.资料： 01:微信小程序引用02:阿里巴巴矢量图库 2.前言 weui是一套同微信原生视觉体验一致的基础样式库...
.一、登录阿里云矢量图标库 登录阿里云矢量图标库官网[https://www.iconfont.cn/]，搜索自己...
1.实现效果 2.实现原理 2.1 引入阿里巴巴矢量图标 可参考文章：微信小程序引入外部icon（阿里巴巴矢量图标...
1. 从阿里巴巴矢量图标库中下载具体图标的svg文件 「阿里巴巴矢量图标库Iconfont」(http://www...
Iconfont-阿里巴巴矢量图标库
我们下面使用的是阿里巴巴矢量图标库点击上面链接，打开阿里巴巴矢量图标库，并登陆。如下图所示，我们点击图标库下面的官...
# copy_alibaba 一键复制阿里巴巴矢量图标库SVG图标，无需下载 阿里巴巴矢量图标库提供了大量的图...
本文标题：微信小程序引用阿里矢量图标库
本文链接：https://www.haomeiwen.com/subject/lojarqtx.html
网友评论