阿里矢量图标库

使用阿里矢量图标库的好处：

大量已设计好的套装图标 ，将会带来全新的使用体验；
可以自行选择大量好看的图标；
重要的是 白嫖!白嫖!白嫖! ；

使用方法:

准备步骤

1.进入阿里矢量图标库:

2.选择一个适合漂亮的图标加入购物车

3.将你在购物车中图标放入自己的分组项目中(多项目时方便管理)
如果没有分组,可以项目管理模块右上角添加一个项目

添加完成后可以在我的项目中查看新添加的图标

接下来我们就可以开始引用了

网络路径引用

1.将对应的图标下载到本地

下载解压后文件目录如下这里由于下载了很多软件可能文件的类型不是很清晰:

我们将这个文件中的所有文件复制在微信小程序的文件下建议使用一个对应的文件夹
这里由于是微信小程序 (css=>wxss),我们将其中以css 后缀结尾的文件复制一份,将其文件类型改为 wxss为了方便使用我们在app.wxss中全局引用
1.移入微信小程序

2.新增 wxss文件(同文件夹)
3.修改其中的属性 @font-face

1.如果有更新就会需要重新获取
2.选择Unicode 获取对应的@font-face

复制后替换对应的@font-face

在页面上使用:

重点注意:class 中的 iconfont 是固定对应的iconfont.wxss中的 font-family,也可以在下载icon时进行指定
使用网络路径到这里就基本上完成了

本地引用:

1.注意要点:查看项目设置-字体格式选择上Base64

下载后的css 文件会出现对应的Base64路径

进行下载,后重复网络路径引用的 步骤1 即可

微信小程序代码片库

微信小程序-阿里矢量图标引入

本文特别鸣谢:
1.https://www.cnblogs.com/dangerously/p/9984622.html

微信小程序引入阿里矢量图标库相关推荐

微信小程序引入外部矢量图标（阿里巴巴矢量图标）
1.显示效果 2.实现步骤进入阿里巴巴矢量图标库搜索想要的矢量图标并加入购物车,点击右上角购物车将图标添加至项目更改项目设置将字体格式设置为TTF Base64 点击下载至本地在微信小程序 ...
微信小程序使用阿里彩色图标
微信小程序使用阿里彩色图标首先全局安装 iconfont-tools 1.先windows+R打开cmd命令窗口 2.输入npm i -g iconfont-tools 3.下载自己要使用的彩色图标 ...
微信小程序中使用阿里巴巴图标库
这里写自定义目录标题微信小程序中使用阿里巴巴图标库第一步第二步第三步微信小程序中使用阿里巴巴图标库第一步阿里巴巴图标正常加入自己的项目,并下载到本地: 注意:这里的选择 ![在这里插入图 ...
Vue项目中，引入阿里矢量图标库
Vue项目中,引入阿里矢量图标库 (1)阿里矢量图标库地址(需要登录): https://www.iconfont.cn (2)找到自己心仪的图标: (3)添加入库: (4)点击购物车图标(免费的哦) ...
uniapp 引入阿里矢量图标库的详细步骤及踩坑经历
uniapp 引入阿里矢量图标库的详细步骤及踩坑经历首先在阿里矢量图标库选择自己喜欢的图标加购物车如下图点击右上角的购物车添加到项目这里有坑首先你不选中在线链接你是看不到 @font-f ...
在uni-app里面怎么引入阿里矢量图标库？
最近在学习uni-app,每次在需要用到icon的时候都得下载下来,感觉好麻烦,所以就找到了直接引入阿里矢量图标库的方法,妈妈再也不用担心我为下载icon的样式不规范而发愁了,以下方法供大家参考在图 ...
微信小程序引入iconfont字体图标（阿里巴巴矢量图标库）
微信小程序怎么引入iconfont字体图标由于微信小程序线上的资源限制了各种接口安全域名,所以在小程序里如果想使用iconfont字体图标就会稍有不同,其实只需要把平时的iconfont字体图标远 ...
微信小程序使用阿里矢量图自定义icon
在微信小程序中使用icon 1.在阿里矢量图官网选好图标加入我的项目,在项目中点击Font class和查看在线链接, 2.然后会生成链接地址,点击进入 3.复制代码 4.在微信开发者工具中创建样式文 ...
小程序引入阿里矢量图
大家好,又和大家见面了,今天给大家分享的是小程序如何引入阿里矢量图库,现在想想已近迫不及待拉吧,那么大家跟我来吧! 1.准备:阿里矢量图 http://iconfont.cn/help/detail? ...
微信小程序引入阿里巴巴彩色图标字体（Symbol）
步骤一:在微信小程序开发者工具的工作的根目录打开cmd,输入 npm install mini-program-iconfont-cli --save-dev 步骤二:输入命令,生成iconfont. ...

微信小程序引入阿里矢量图标库