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.