图标与图片

每个项目可以有一个视觉元素——要么是内置图标,要么是自定义图片。您一次只能使用一个,而不能同时使用两个。


内置图标

图标是来自集成的Remixicon库的矢量符号。它们在任何大小下都清晰,并且不需要文件上传。

如何添加

  1. 在编辑项目面板中,点击图标按钮。
  2. 图标搜索框打开——输入一个关键词(例如homecartphonesearch)。
  3. 点击一个图标以选择它——预览会立即出现在项目上。
  4. 点击×以移除当前图标。

何时使用图标

  • Tab Bar中的项目——图标是标记标签的标准方式。
  • 当您想要干净、一致的外观时。
  • 当您没有准备好自定义图片时。

自定义图片

使用您自己的照片、徽标或图形来替代库图标。

Starter plan: 不支持自定义图片——请使用内置图标。

选项A — 从图库上传 (Business / Elite)

  1. 在编辑项目面板中点击图片按钮。
  2. 点击图库→上传对话框打开。
  3. 选择或上传一张图片(JPG,PNG,GIF)。
  4. 确认——图片URL会自动填入。

选项B — 粘贴图片URL (Elite)

  1. 点击图片按钮。
  2. 将完整的图片URL粘贴到URL字段中。
  3. 点击更新

图片提示

  • 对于Tab Bar图标,使用正方形(1:1)图片。
  • 对于大图项目,使用横向图片。
  • 带透明背景的PNG最适合徽标和符号。
  • 保持文件大小小——大文件会减慢移动设备上的菜单。
  • Elite会自动将图片转换为WebP并标准化尺寸。

显示布局

添加图标或图片后,选择图标/图片和文本在布局 → 显示布局中的排列方式:

选项 布局
自动 遵循菜单类型默认
自上而下 图标/图片在上,文本在下
左右 图标/图片在左,文本在右
自下而上 文本在上,图标/图片在下
左右 文本在左,图标/图片在右
仅图标/图片 仅图标/图片——文本隐藏
仅文本 仅文本——图标/图片隐藏

样式图标或图片

前往界面 → 图标/图片样式以微调外观:

设置 效果
图标颜色 更改图标矢量颜色(十六进制)。不适用于图片文件。
大小(px) 图标或图片的显示大小
容器 包围图标的框的背景颜色
内边距(px) 图标与其容器框之间的间距
曲率(px) 容器的角半径——设置50为圆形

示例——白色图标在蓝色圆形框中:

图标颜色:  #FFFFFF
容器:   #0066CC
内边距:     10
曲率:       50