在微信小程序中引入iconfont

一、下载图标

  1. 将目标图标添加到库。

  2. 在库里批量操作添加到项目。

  3. 在当前项目页面选择 Font class,点击下载至本地。

二、在项目中引入

  1. 在小程序项目中新建一个文件 iconfont.wxss。

  2. 将下载资源中的 iconfont.css 文件拷贝到 iconfont.wxss。

三、将项目资源路径改成外链

  1. 在 iconfont 项目页面,选择 Unicode,点击查看在线链接,复制代码。

  2. 替换小程序项目中 iconfont.wxss 中的资源引入路径 @font-face

四、使用

  1. 在 app.wxss 和使用到 iconfont 的组件wxss 文件里引入。
    @import 'styles/iconfont.wxss';
  2. 使用方法和 web 开发一样。
    <icon class="iconfont gp_shexiangtou_guanbi"></icon>
posted @ 2022-03-16 09:34  shellon  阅读(1229)  评论(0编辑  收藏  举报