微信小程序开发--如何使用字体图标

时间:2024-03-22 16:58:43

第一步:下载需要的字体图标

进入阿里图标官网http://iconfont.cn/搜索自己想要的图标
流程为:
选中需要的图标—>点击“添加入库”–>点击购物车进入购物车–>点击下载代码按钮。
微信小程序开发--如何使用字体图标
微信小程序开发--如何使用字体图标
点击下载代码,将得到名为download.zip的压缩包,解压将看到以下内容:
微信小程序开发--如何使用字体图标

第二步:转换ttf文件

进入https://transfonter.org/平台,将解压出来的ttf字体文件转化成base64格式。
流程如下:
点击Add fonts --> 添加刚才下载的文件夹里的iconfont.ttf --> 选中Base64 encode、TTF两个选项 --> 点击Convert --> 点击下载Download微信小程序开发--如何使用字体图标
微信小程序开发--如何使用字体图标
下载后得到一个压缩包,解压将看到以下内容:
微信小程序开发--如何使用字体图标

第三步 微信小程序使用图标

1.把上一步的文件打开,打开stylesheet.css:
2.再打开第一步(第一步 下载自己喜欢的图标)中下载的文件即一开始还没转换用download.zip解压的文件,打开里面的iconfont.css
3.把iconfont.css里面圈红的部分(即fontface部分不需要复制)复制到stylesheet.css里面
微信小程序开发--如何使用字体图标

最后使用:

修改stylesheet.css后缀为wxss,名字也可以改为自己需要的(注意!!),然后就改好的整个文件夹放进微信小程序的公共文件里面,然后把整个文件import到页面的样式表里
微信小程序开发--如何使用字体图标
微信小程序开发--如何使用字体图标
微信小程序开发--如何使用字体图标
效果:
微信小程序开发--如何使用字体图标