乐趣区

微信小程序怎么使用icon

小程序怎么使用 icon

第一步 下载 icon

我选择的图标库是阿里图标官网, 加入购物车

第二步 转换 ttf

因为小程序的 wxss 文件的 font-face 的 url 不接受 http 地址作为参数, 但可以接受 base64, 因此需将字体文件下载后, 转换为 base64,然后引用

  • 进入 https://transfonter.org/ 平台
  • 点击 Add fonts,添加 iconfont.ttf
  • 勾选 Base64 encode
  • 点击 convert 完成转换

  • 按照上图 1,2,3 的步骤 转换完成,点击 Download

第三步 在微信小程序中使用 icon

  • 解压 第二步中的文件夹找到 stylesheet.css 文件

  • 打开第一步中压缩包的 iconfont.css,把里面圈红的部分(即 fontface 部分我们不需要啦)复制到 stylesheet.css

  • 修改后的 stylesheet.css

  • 修改 stylesheet.css 的文件后缀为 wxss,即 stylesheet.wxss
  • 把 stylesheet.wxss 放进微信小程序的公共文件里面,然后把整个文件 import 到页面的样式表里

  • 在 wxml 页面引入使用

完结

原文地址

退出移动版