图标的使用

在uniapp中使用阿里巴巴图标具体步骤的笔记

1.打开网站

iconfont-阿里巴巴矢量图标库

2.挑选图标加入项目

818d458fee0aedcc896b09ee4ca1be8

image-20230517210529224

在”我的项目“中可以找到所有添加的图标

8c3b2d1a64d4bc225468df9c6c38645

3.使用图标

下载图标压缩包

image-20230517210907076

解压

image-20230517211006767

将.css文件导入到项目中

a6ca1194273484cd98f3b4f988f37ac

在App.vue中引入.css

image-20230517211851428

复制阿里的在线链接

image-20230517211300004

替换掉css中的@font-face {…}

注意这里把复制来的

//at.alicdn.com/...

改成

https://at.alicdn.com/...

也就是在前面加上 https:

这样的话,就可以避免项目打包成apk后,在手机上图标不显示的问题

image-20230517211436043

使用图标

可以以类名的方法来使用

image-20230517212014944

image-20230517212410550

具体更多的使用方法可以看最开始压缩包里的.html文件

比如直接复制图标的代码到需要的地方 (如:) ,但是必须加上类名”iconfont”

image-20230517212951385

image-20230517212134814