方式一 ： 下载svg导入

• 优点：操作方便，支持多彩图标
• 缺点：会增加源代码大小

下载 svg 格式的图标图片，放入源码中使用

小程序项目中的路径为 assets\\icon\\美食.svg

使用时-代码范例

<image class="imgIcon" src="/assets/icon/美食.svg" />

.imgIcon {height: 60rpx;width: 60rpx;margin-right: 20rpx;
}

方式二 ： 导入wxss

• 优点：不会增加源代码大小
• 缺点：不支持多彩图标，更新比较麻烦

将图标添加到自己的图标项目中后，生成对应的 css 链接

浏览器打开css链接

将其拷贝到小程序项目中新建的文件 assets\\icon\\icon.wxss 中

@font-face {font-family: "iconfont";/* Project id 1167694 */src: url('//at.alicdn.com/t/c/font_1167694_c6t4jllqo2b.woff2?t=1681094540417') format('woff2'),url('//at.alicdn.com/t/c/font_1167694_c6t4jllqo2b.woff?t=1681094540417') format('woff'),url('//at.alicdn.com/t/c/font_1167694_c6t4jllqo2b.ttf?t=1681094540417') format('truetype');
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-feiji:before {content: "\\e8b2";
}.icon-zhuizhuiju:before {content: "\\ebdb";
}.icon-lvyou:before {content: "\\e618";
}.icon-meishi:before {content: "\\fab7";
}.icon-kejian:before {content: "\\e630";
}.icon-bukejian:before {content: "\\e604";
}

使用时-代码范例

  <view class="iconfont icon-meishi"></view>

在页面的 wxss 中，记得导入图标的 wxss 文件

@import "/assets/icon/icon.wxss"