图标与图片
每个项目可以有一个视觉元素——要么是内置图标,要么是自定义图片。您一次只能使用一个,而不能同时使用两个。
内置图标
图标是来自集成的Remixicon库的矢量符号。它们在任何大小下都清晰,并且不需要文件上传。
如何添加
- 在编辑项目面板中,点击图标按钮。
- 图标搜索框打开——输入一个关键词(例如
home,cart,phone,search)。 - 点击一个图标以选择它——预览会立即出现在项目上。
- 点击×以移除当前图标。
何时使用图标
- Tab Bar中的项目——图标是标记标签的标准方式。
- 当您想要干净、一致的外观时。
- 当您没有准备好自定义图片时。
自定义图片
使用您自己的照片、徽标或图形来替代库图标。
Starter plan: 不支持自定义图片——请使用内置图标。
选项A — 从图库上传 (Business / Elite)
- 在编辑项目面板中点击图片按钮。
- 点击图库→上传对话框打开。
- 选择或上传一张图片(JPG,PNG,GIF)。
- 确认——图片URL会自动填入。
选项B — 粘贴图片URL (Elite)
- 点击图片按钮。
- 将完整的图片URL粘贴到URL字段中。
- 点击更新。
图片提示
- 对于Tab Bar图标,使用正方形(1:1)图片。
- 对于大图项目,使用横向图片。
- 带透明背景的PNG最适合徽标和符号。
- 保持文件大小小——大文件会减慢移动设备上的菜单。
- Elite会自动将图片转换为WebP并标准化尺寸。
显示布局
添加图标或图片后,选择图标/图片和文本在布局 → 显示布局中的排列方式:
| 选项 | 布局 |
|---|---|
| 自动 | 遵循菜单类型默认 |
| 自上而下 | 图标/图片在上,文本在下 |
| 左右 | 图标/图片在左,文本在右 |
| 自下而上 | 文本在上,图标/图片在下 |
| 左右 | 文本在左,图标/图片在右 |
| 仅图标/图片 | 仅图标/图片——文本隐藏 |
| 仅文本 | 仅文本——图标/图片隐藏 |
样式图标或图片
前往界面 → 图标/图片样式以微调外观:
| 设置 | 效果 |
|---|---|
| 图标颜色 | 更改图标矢量颜色(十六进制)。不适用于图片文件。 |
| 大小(px) | 图标或图片的显示大小 |
| 容器 | 包围图标的框的背景颜色 |
| 内边距(px) | 图标与其容器框之间的间距 |
| 曲率(px) | 容器的角半径——设置50为圆形 |
示例——白色图标在蓝色圆形框中:
图标颜色: #FFFFFF
容器: #0066CC
内边距: 10
曲率: 50