这篇文章解释了如何 更改按钮元素内的图标颜色 在 GemPages 中使用自定义 CSS。
大多数情况下，按钮图标会自动继承默认样式。但是，当使用自定义按钮背景、品牌颜色或深色布局时，您可能需要手动定义图标颜色，以确保图标清晰可见且样式一致。
此 按钮元素 GemPages 支持两种布局类型，具体取决于按钮的配置方式：
- 没有图标的按钮： 仅显示按钮文本
- 带图标的按钮： 按钮文本旁边会显示一个图标。
如果您使用的是 带图标的按钮 在布局方面，您可以使用自定义 CSS 来定制图标外观。在本指南中，您将学习如何…… 更改图标颜色 使用包含图标的按钮时。
为什么图标颜色在按钮设计中很重要
按钮内的图标可以帮助用户快速了解操作的目的。
然而，默认图标颜色并不总是符合您的设计需求。在许多实际项目中，商家希望按钮图标具备以下特性：
- 匹配品牌颜色
- 在深色或渐变背景下保持可见
- 与按钮文本颜色对齐
- 在多个部分保持一致的样式
如果图标颜色与背景对比度不够高，就可能难以看清，从而降低按钮的有效性。
如何更改按钮元素中的图标颜色
按照以下步骤为按钮应用自定义图标颜色。
步骤 1：打开按钮的自定义代码
- 在编辑器中打开您的页面。
- 找到 按钮元素 包含该图标。
- 右键单击按钮元素。
- 选择 自定义代码.
自定义代码面板将打开。
步骤 2：添加 CSS 代码
里面的 的CSS tab 键，添加以下代码：
| button.elementID svg{
颜色：#ffffff; } |
更换：
元素ID 班级名称显示在顶部。
＃FFFFFF 使用您喜欢的颜色代码。
如果您不知道要使用的 HEX 颜色代码，可以使用在线颜色选择器工具生成一个。 以下是一些实用网站：
第 3 步：保存并发布
添加代码后，点击 保存。 T图标颜色将立即更新。
选择有效图标颜色的技巧
考虑以下几点：
1. 保持强烈的对比度
图标应该清晰易辨。
对比鲜明的例子：
- 深色按钮 + 白色图标
- 浅色按钮 + 深色图标
对比度差的例子：
- 深色按钮 + 深色图标
- 灯光按钮 + 灯光图标
2. 坚持使用你的品牌色调
尽可能使用官方品牌颜色。
避免使用会破坏视觉一致性的随意颜色。
3. 跨设备测试
检查图标可见性：
- 桌面
- 坚固型平板电脑
- 电话
有些颜色在较小的屏幕上显示效果会有所不同。
如果您还需要调整图标大小，可以按照以下指南操作： 如何使用自定义代码更改按钮元素中的图标大小 在进行颜色自定义之前，请先调整图标尺寸。
谢谢您的意见