Skip to content

图标颜色

可为图标设置自定义颜色,使界面更符合个人审美。 首页

支持颜色的图标类型

图标类型是否支持说明
内置 SVG 图标通过替换 currentColor 实现
FontAwesome 图标通过 CSS color 属性实现
Bootstrap Icons 图标通过 CSS color 属性实现
导入的图片文件保持原始颜色
Data URL 图片保持原始颜色
SVG 文本(粘贴导入)取决于 SVG 内部定义

设置颜色方法

  1. 在图标选择器中选择支持着色的图标
  2. 长按图标打开颜色编辑器
  3. 在颜色选择器中选择颜色
  4. 图标会以选定颜色实时预览
  5. 点击确认保存

颜色选择器功能

  • 预设颜色:常用颜色快速选择
  • 色盘:自定义任意颜色
  • 透明度:可设置半透明效果

图标背景色

部分图标类型还支持设置背景色:

图标类型前景色背景色背景透明
内置 SVG
FontAwesome
Bootstrap Icons
其他类型

清除颜色

如果想恢复默认颜色:

  1. 点击颜色按钮
  2. 选择透明/无颜色选项
  3. 或点击清除颜色按钮

分类图标颜色

分类图标同样支持自定义颜色:

  1. 选择分类
  2. 点击图标区域
  3. 选择图标后设置颜色
  4. 确认保存

Released under the MIT License.