微信小程序使用icon font图标，任意改变颜色和大小_微信小程序使用iconfont
一、在 IconFont 平台选择图标
1. 访问 IconFont 官网。
2. 搜索你需要的图标，将其添加到购物车。
3. 点击购物车图标，然后点击 “下载至本地”，选择 “Unicode” 模式进行下载。
二、将字体文件添加到小程序项目
1. 解压下载的文件，会得到多个文件，其中 iconfont.css、iconfont.woff、iconfont.woff2、iconfont.ttf 是我们需要的。
2. 在小程序项目根目录中创建一个 assets 文件夹，再在其中创建 css 文件夹，将上述字体文件复制到 assets/css 目录下。
三、创建并引入 CSS 文件
1. 在 assets/css文件夹下创建一个 iconfont.scss（也可以是 .css）文件，将 iconfont.css 中的内容复制到 iconfont.scss 中，并修改 @font-face 里字体文件的路径。
其中的路径要重点修改，最好改成完整的路径引用，我的目录是/assets/css/
@font-face { font-family: \"iconfont\"; /* Project id 4902073 */ src: url(\'/assets/css/iconfont.woff2?t=1745314850894\') format(\'woff2\'), url(\'/assets/css/iconfont.woff?t=1745314850894\') format(\'woff\'), url(\'/assets/css/iconfont.ttf?t=1745314850894\') format(\'truetype\');}.iconfont { font-family: \"iconfont\" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}.icon-home1:before { content: \"\\e60a\";}.icon-kefu:before { content: \"\\e60d\";}.icon-feedback:before { content: \"\\e60b\";}.icon-my01:before { content: \"\\e612\";}2. 在 app.scss 中引入 iconfont.scss。
@import \'./assets/css/iconfont.scss\';四、在页面中使用图标
由于微信小程序的 组件不支持自定义字体图标，所以使用 或其他标签来显示图标。
补充：引用完成后重新运行项目。初始的时候引用的方式是相对路径引入字体资源，报错
[渲染层网络层错误] Failed to load local font resource /iconfont.ttf?t=1745314850894-do-not-use-local-path-./app.wxss&6&7 the server responded with a status of 500 (HTTP/1.1 500 Internal Server Error) (env: Windows,mp,1.06.2402030; lib: 3.7.7)修改路径为绝对路径就可以正常运行了
五、特殊问题：上传体验版后图标再次失效
办法就是：将.ttf文件装换成base64格式引用
①打开https://transfonter.org/网站，选择之前解压缩的.ttf文件
②将下载的压缩包解压，打开里面的stylesheet.css文件，复制内容，替换掉项目里的在 assets/css文件夹下的 iconfont.scss内容
重新运行项目即可。
