100 lines
2.4 KiB
Plaintext
100 lines
2.4 KiB
Plaintext
# 图标素材准备指南
|
||
|
||
## Iconfont 下载指南
|
||
|
||
本文档列出项目所需的图标，请从 https://www.iconfont.cn/ 下载对应图标。
|
||
|
||
---
|
||
|
||
## 底部导航栏图标（必须）
|
||
|
||
### 首页图标
|
||
- **搜索关键词：** 首页 / home
|
||
- **推荐图标集：** 阿里巴巴图标库 / linear图标
|
||
- **尺寸：** 48x48 px
|
||
- **颜色：** 灰色 #94A3B8（未选中） / 靛蓝 #6366F1（选中）
|
||
- **文件命名：**
|
||
- `home.png` - 未选中状态
|
||
- `home-active.png` - 选中状态
|
||
|
||
### 我的图标
|
||
- **搜索关键词：** 我的 / 用户 / user
|
||
- **推荐图标集：** 阿里巴巴图标库 / linear图标
|
||
- **尺寸：** 48x48 px
|
||
- **颜色：** 灰色 #94A3B8（未选中） / 靛蓝 #6366F1（选中）
|
||
- **文件命名：**
|
||
- `profile.png` - 未选中状态
|
||
- `profile-active.png` - 选中状态
|
||
|
||
---
|
||
|
||
## 页面内图标（推荐）
|
||
|
||
### 首页
|
||
- 🔍 **搜索图标** - search
|
||
- 📍 **位置图标** - location / map
|
||
- ⭐ **星星图标** - star / rating
|
||
|
||
### 个人中心
|
||
- 📋 **订单图标** - order / list
|
||
- 📍 **地址图标** - location
|
||
- ⚙️ **设置图标** - settings
|
||
- 💳 **会员图标** - VIP / member
|
||
- 🎫 **优惠券图标** - coupon / ticket
|
||
|
||
### 店铺详情
|
||
- 📞 **电话图标** - phone
|
||
- 📍 **导航图标** - location / navigation
|
||
- 🕐 **时间图标** - clock / time
|
||
|
||
### 优惠券
|
||
- ✓ **勾选图标** - check / success
|
||
|
||
---
|
||
|
||
## 下载步骤
|
||
|
||
1. 访问 https://www.iconfont.cn/
|
||
2. 搜索对应关键词（如"首页"）
|
||
3. 选择合适的图标
|
||
4. 点击下载，选择 PNG 格式
|
||
5. 调整颜色和尺寸
|
||
6. 保存到 `static/icons/` 目录
|
||
|
||
---
|
||
|
||
## 推荐图标集
|
||
|
||
- **阿里巴巴图标库** - https://www.iconfont.cn/collections/detail?cid=29341
|
||
- **Linear Icons** - 简约线条风格
|
||
- **Remix Icon** - 现代设计风格
|
||
- **Tabbar Icons** - 专门用于底部导航
|
||
|
||
---
|
||
|
||
## 颜色配置
|
||
|
||
| 用途 | 颜色代码 | 说明 |
|
||
|------|---------|------|
|
||
| 未选中 | #94A3B8 | 浅灰色 |
|
||
| 选中 | #6366F1 | 靛蓝色 |
|
||
| 主要图标 | #6366F1 | 靛蓝色 |
|
||
| 次要图标 | #94A3B8 | 灰色 |
|
||
| 装饰图标 | #CBD5E1 | 更浅的灰色 |
|
||
|
||
---
|
||
|
||
## 临时方案
|
||
|
||
如果暂时无法下载图标，可以使用以下方法：
|
||
|
||
1. **使用在线图标库**
|
||
- Remix Icon: https://remixicon.com/
|
||
- Heroicons: https://heroicons.com/
|
||
|
||
2. **使用纯色占位图**
|
||
- 创建简单的圆形或方形占位图
|
||
|
||
3. **使用文字替代**
|
||
- 临时使用文字代替图标
|