阿里图标库文件说明
📁 目录结构
将从阿里图标库下载的文件放在这个目录下:
static/iconfont/
├── iconfont.css ← CSS 样式文件
├── iconfont.ttf ← 字体文件(TrueType)
├── iconfont.woff ← 字体文件(Web Open Font Format)
├── iconfont.woff2 ← 字体文件(Web Open Font Format 2.0,推荐)
└── README.md ← 本说明文件
📝 使用步骤
1. 下载图标文件
- 访问 https://www.iconfont.cn/
- 登录并选择/创建项目
- 添加需要的图标
- 点击"下载至本地"
2. 复制文件
将下载包中的以下文件复制到本目录:
iconfont.css
iconfont.ttf
iconfont.woff
iconfont.woff2
3. 修改 CSS 路径
打开 iconfont.css
,将字体文件路径修改为:
@font-face {
font-family: "iconfont";
src: url('./iconfont.woff2') format('woff2'),
url('./iconfont.woff') format('woff'),
url('./iconfont.ttf') format('truetype');
}
4. 在 App.vue 中引入
已在 App.vue
中自动引入,无需额外操作。
⚠️ 注意事项
- 必须使用本地文件:微信小程序不支持在线字体链接
- 路径必须正确:确保字体文件路径指向正确位置
- 文件完整性:确保所有字体文件都已复制
- 版本更新:更新图标时替换所有文件