58 lines
1.5 KiB
Markdown
58 lines
1.5 KiB
Markdown
|
# 阿里图标库文件说明
|
|||
|
|
|
|||
|
|
## 📁 目录结构
|
|||
|
|
|
|||
|
|
将从阿里图标库下载的文件放在这个目录下：
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
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`，将字体文件路径修改为：
|
|||
|
|
|
|||
|
|
```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. **版本更新**：更新图标时替换所有文件
|
|||
|
|
|
|||
|
|
## 🔗 相关链接
|
|||
|
|
|
|||
|
|
- [阿里图标库](https://www.iconfont.cn/)
|
|||
|
|
- [使用文档](../../docs/阿里图标库引入指南.md)
|
|||
|
|
|