🎯 方法一：使用小程序原生图标（推荐）
微信小程序自带了一套图标库，直接使用：
<!-- 使用微信内置图标 --> <icon type="success" size="40" color="#09BB07"></icon> <icon type="info" size="40" color="#10AEFF"></icon> <icon type="warn" size="40" color="#FAAD14"></icon> <icon type="waiting" size="40" color="#10AEFF"></icon> <icon type="clear" size="40" color="#FAAD14"></icon> <icon type="search" size="40" color="#999"></icon> <icon type="success_no_circle" size="40" color="#09BB07"></icon> <icon type="cancel" size="40" color="#FAAD14"></icon> <icon type="download" size="40" color="#108EE9"></icon>
🎯 方法二：使用 FontAwesome 字体文件
步骤1：下载 FontAwesome 字体文件
下载免费的 Web 字体文件（.woff2 格式）
步骤2：转换字体格式
小程序支持 .ttf 格式，需要转换：
# 可以使用在线转换工具： # https://cloudconvert.com/ # 将 .woff2 转换为 .ttf
步骤3：在项目中引入
在项目根目录创建
fonts文件夹将
fontawesome.ttf放入其中
步骤4：在 app.wxss 中定义字体
/* app.wxss */
@font-face {
font-family: 'FontAwesome';
src: url('/fonts/fontawesome.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/* 定义图标类 */
.icon {
font-family: 'FontAwesome';
}
/* 常用图标类 */
.icon-home::before { content: "\f015"; } /* 首页 */
.icon-user::before { content: "\f007"; } /* 用户 */
.icon-search::before { content: "\f002"; } /* 搜索 */
.icon-heart::before { content: "\f004"; } /* 心形 */
.icon-star::before { content: "\f005"; } /* 星星 */
.icon-cog::before { content: "\f013"; } /* 设置 */
.icon-bell::before { content: "\f0f3"; } /* 铃铛 */
.icon-envelope::before { content: "\f0e0"; } /* 信封 */步骤5：在 WXML 中使用
<view class="icon icon-home">首页</view> <view class="icon icon-user">我的</view> <view class="icon icon-search">搜索</view>
🎯 方法三：使用图标字体 CDN（简单但有限制）
在 base.wxml 或单个页面中使用
<!-- 引入 FontAwesome CSS --> <style> @import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"; </style> <!-- 使用图标 --> <view style="font-family: 'Font Awesome 6 Free'; font-weight: 900;">  <!-- 首页图标 --> </view>
注意：这种方法可能在小程序审核时被拒绝。
🎯 方法四：使用 SVG 图标（最推荐）
步骤1：下载 SVG 图标
从 FontAwesome 下载需要的 SVG 图标文件。
步骤2：创建图标组件
// components/icon/icon.js
Component({
properties: {
name: String,
size: {
type: Number,
value: 32
},
color: {
type: String,
value: '#000000'
}
},
data: {
icons: {
home: 'M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z',
user: 'M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z',
search: 'M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'
}
}
})<!-- components/icon/icon.wxml -->
<view class="icon" style="width: {{size}}rpx; height: {{size}}rpx;">
<svg width="100%" height="100%" viewBox="0 0 24 24">
<path d="{{icons[name]}}" fill="{{color}}"></path>
</svg>
</view>/* components/icon/icon.wxss */
.icon {
display: inline-flex;
align-items: center;
justify-content: center;
}步骤3：使用图标组件
<!-- 在页面中使用 --> <icon name="home" size="40" color="#8a11db"></icon> <icon name="user" size="40" color="#1890ff"></icon> <icon name="search" size="40" color="#52c41a"></icon>
🎯 方法五：使用第三方图标库
使用 ColorUI 或 WeUI 的图标
<!-- 使用 ColorUI 图标 --> <view class="cuIcon-home"></view> <view class="cuIcon-people"></view> <view class="cuIcon-search"></view>
📝 完整示例：使用 SVG 方法
创建 icons.wxs 文件
// utils/icons.wxs
var icons = {
home: 'M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z',
user: 'M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z',
search: 'M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z',
heart: 'M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z',
star: 'M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'
}
module.exports = {
getIcon: function(name) {
return icons[name] || ''
}
}在 WXML 中使用
<!-- 引入 wxs -->
<wxs src="../../utils/icons.wxs" module="icons" />
<!-- 使用图标 -->
<view class="icon-item">
<svg width="40" height="40" viewBox="0 0 24 24">
<path d="{{icons.getIcon('home')}}" fill="#8a11db"></path>
</svg>
<text>首页</text>
</view>
<view class="icon-item">
<svg width="40" height="40" viewBox="0 0 24 24">
<path d="{{icons.getIcon('user')}}" fill="#1890ff"></path>
</svg>
<text>用户</text>
</view>💡 推荐方案
对于微信小程序：
优先使用微信原生图标 - 最简单，性能最好
复杂图标使用 SVG - 最灵活，效果最好
避免使用字体文件 - 文件大，兼容性问题