1.在iconfont官网创建自己的项目

选择自己需要的图标加入'购物车',然后在'购物车'页面点击添加至项目,没有项目的话点击新建项目.

2.把我的项目下载到本地,复制小程序项目中并引用

我的项目入口在这

解压刚下好的项目压缩包,把里面的文件复制到自己项目中,我这里是专门下载的组件用的图标,所以在组件目录里面新建iconfont文件夹,把字体文件复制到其中.

然后在要使用图标的组件的wxss文件中引入刚下载的iconfont.wxss文件,全局使用的话可以在app.wxss里面引用

引用之后会报错[渲染层网络啥啥啥的],这是因为iconfont.wxss引入路径问题,更改路径就行了

3.在wxml中使用iconfont

<icon class="iconfont XXXX" style="font-size:150px;color:red;"></icon>

其中的XXXX为图标的font-class,对应图标的font-class可在官网我的项目中查看,也可在iconfont.wxss里面查看(最好在官网查看,第一可以更直观的找到想用的图标,第二直接复制代码更方便,第三在iconfont.json里面查看的话记得自己加前缀icon- ).图标大小用font-size控制,图标颜色用color控制.

这里讲的是font-class方式引用,其他方式可查看官方文档

4.解决问题

这里就可以在开发者工具中正常使用图标了,但是我们会发现真机调试时手机上无法显示图标,不要慌,只要简单两步就可以解决这个问题

1.将iconfont.woff文件转为base64格式

在线转换网站

2.替换原来的woff文件

下载好转换之后的文件之后将其中的stylesheet.css文件打开,复制其中的src一整行,注意这个很长不要漏了

然后将复制的内容粘贴到自己的iconfont.wxss文件的woff文件行(替代原来的)

然后就真的可以正常使用了.

[超详细]微信小程序使用iconfont教程及解决真机无法显示问题相关推荐

微信小程序点击图片预览真机无法显示的问题
问题: 用开发者工具开发编辑时,点击图片预览,一直显示黑屏加载转圈中- 如图所示: 实际效果图: 话不多说,直接上代码 1.html代码: <view class="img-box&q ...
微信小程序引入iconfont图标，解决渲染层失败（2022年7月11日）
前言网上的教程几乎都是清一色的引用阿里云矢量图标的在线链接,可惜现在阿里现在已经没有在线链接了. 解决方法然后我吧文件下载到本地尝试引用,抱歉woff文件识别不了,微信小程序是没法直接识别woff ...
微信小程序调试模式请求失败，真机模式、调试带控制台模式却都成功
微信小程序预览模式和真机调试模式和带控制台信息的预览模式微信小程序的双缝干涉问题微信小程序的双缝干涉问题最近在项目中碰到了一个BUG. 测试时候发现真机调试和预览模式中居然不一样,这种情况其实也 ...
微信小程序本地电脑tomcat启服务,真机测试实现
最近开发小程序,小程序真机请求只支持https.开发中想实时的预览开发成果,就需要在本地配置域名的ssl证书,最后实现手机和电脑在同一局域网下就可以实现真机测试本地启的项目.(我在公司测试手机电脑都连 ...
微信小程序开发之音乐播放器真机测试 audio API
简单的试了试播放器,还是有不少坑的.开始在模拟器上跑,一直没有声音,总是刚开始播放就暂停.做个笔记. 准备资源: 音乐图片地址:http://ac-5g9r20ds.clouddn.com/63bed ...
微信小程序自动化测试全流程（安卓真机+Appium）
一.连接手机 1.手机设置成开发者模式(我用的oppo,所以是设置-关于手机-三击"版本号",开发者模式打开) 2.开启USB调试(设置-其它设置-开发者选项-USB调试打开,最好 ...
超详细微信小程序自定义组件
一.创建组件 1.在根目录下自定义一个components文件夹,用来存放自定义的组件. 2.再针对每一个组件创建一个文件夹,用来存放这个组件相关的文件. 3.在指定组件的文件夹中右键->新建C ...
微信小程序开发基础教程
文章目录 1.什么叫做微信小程序 2.微信小程序开发功能特点 3.微信小程序开发流程 3.1 微信公众平台注册 3.2 微信开发者工具下载 3.3 微信开发者工具界面上的基本功能介绍 3.3.1 开发 ...
微信小程序入坑教程二十一：使用wx.saveImageToPhotosAlbum保存图片时通过检测scope.writePhotosAlbum权限来提醒用户是否需要授权
摘要: 在昨天的文章<微信小程序入坑教程二十:生成海报前使用wx.downloadFile或wx.getImageInfo时潜在的坑>中提到了用户授权一事,scope.writePhoto ...

[超详细]微信小程序使用iconfont教程及解决真机无法显示问题