微信小程序使用阿里图标自定义小程序icon

1.普通icon图标的引入

在iconfont官网,将喜欢的字体图标,加入购物车后,在购物车中,将这些图标添加至项目(如果没有项目,就创建一个)

之后复制相关的font-face css代码到小程序里直接使用就可以了。

2.彩色icon图标的引入

彩色的icon如果按照普通的icon来导入,那么也会同样是普通,不会彩色显示。

所以需要我们通过一点特殊的办法。

1.首先。要将iconfont网站上的图标下载到本地并解压

2.安装iconfont-tools工具。npm i -g iconfont-tools

3.在解压后的字体图标文件夹中,使用命令 iconfont-tools  

4.将生成的文件夹里的wxss文件复制到小程序项目中,并在app.wxss中import导入

5.最后,使用对应的class就可以引入彩色字体了

参考地址

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。