原生小程序引入阿里图标库的详细步骤与操作指南

2025-06-24
来源:万象资讯

- 原生小程序引入

找到阿里图标库下载自己想要使用的图标,并将代码下载到本地

阿里图标库地址:

(1)将选好的图标加入购物车

(2)点开购物车,下载代码至本地

打开文件夹,寻找带有.tff扩展名的文件,然后访问文件转换的网页,进行文件转换操作,转换完成后将其下载至本地保存。

iconfont.css替换步骤_微信小程序开发字体icon_原生小程序阿里图标库使用方法

下载完毕后,请执行解压操作,随后打开.css文件,并将文件内的全部代码内容复制下来。

将复制的CSS文件中的全部内容,替换掉原CSS文件中的首个代码块。

将经过修改的.css文件存入项目文件夹,同时将文件的扩展名更改为.wxss。

在app.wxss全局范围内,亦或是在特定页面的wxss中,引入相应的.wxss文件即可。

微信小程序开发字体icon_iconfont.css替换步骤_原生小程序阿里图标库使用方法

(8)然后在项目中就可以正常使用啦~

- 中小程序引入

将下载的代码存入本地后,进行解压操作,然后将扩展名为.css、.tff(若有.woff,也应包含)的文件逐一放入个人项目目录结构之中。

微信小程序开发字体icon_iconfont.css替换步骤_原生小程序阿里图标库使用方法

(2)打开.css文件,修改src中的地址为本地路径

最终,需在项目根目录处的uni.scss文件(项目创建时选择了uni-ui模板)中,进行全局的.css文件引用。

(4)然后就可以在项目中正常使用啦~

分享