Files
2025-10-20 16:15:29 +08:00
..
2025-10-20 16:15:29 +08:00
2025-10-20 16:15:29 +08:00
2025-10-20 16:15:29 +08:00
2025-10-20 16:15:29 +08:00
2025-10-20 16:15:29 +08:00
2025-10-20 16:15:29 +08:00
2025-10-20 16:15:29 +08:00
2025-10-20 16:15:29 +08:00

阿里图标库文件说明

📁 目录结构

将从阿里图标库下载的文件放在这个目录下:

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. 下载图标文件

  1. 访问 https://www.iconfont.cn/
  2. 登录并选择/创建项目
  3. 添加需要的图标
  4. 点击"下载至本地"

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 中自动引入,无需额外操作。

⚠️ 注意事项

  1. 必须使用本地文件:微信小程序不支持在线字体链接
  2. 路径必须正确:确保字体文件路径指向正确位置
  3. 文件完整性:确保所有字体文件都已复制
  4. 版本更新:更新图标时替换所有文件

🔗 相关链接