如何使用自定义代码更改按钮元素中的图标大小

在某些布局中，您可能需要调整图标大小，以更好地与按钮文本或整体设计相匹配。目前，按钮元素内的图标大小无法直接通过内置样式选项进行调整。要自定义图标大小，您可以在元素设置中使用一小段 CSS 代码。

本指南将引导您完成每个步骤，以正确应用更改。

关于带图标的按钮布局

此 按钮元素 GemPages 支持不同的布局，具体取决于您的配置方式。

按钮布局有两种常见方式：

• 无图标按钮：此布局仅包含文本，不包含任何图标。
• 带图标的按钮：此布局包含一个放置的图标 按钮文本之前图标有助于使按钮更具视觉吸引力，更容易识别。

如何使用自定义代码更改按钮元素中的图标大小

请按照以下步骤调整按钮元素内的图标大小。

步骤 1：选择包含图标的按钮元素

来自 GemPages 编辑：

• 打开按钮元素所在的页面或模板。
• 直接点击 按钮元素 包含该图标。
• 确认所选按钮的文本前面包含图标。

选中后，元素设置面板将出现在编辑器的左侧。

请确认您正在编辑正确的按钮后再继续。

步骤 2：打开自定义代码编辑器

找到按钮元素后：

• 右键单击 在包含该图标的 Button 元素上。
• 从下拉菜单中选择 自定义代码.

此操作将打开自定义代码编辑器，您可以在其中添加仅适用于此特定元素的 CSS。

此部分允许您对选定的元素应用额外的样式。

步骤 3：添加 CSS 代码以更改图标大小

里面的 自定义CSS 在相应字段中粘贴以下代码：

这段代码控制选中按钮内图标的大小。

更换：

• .元素类 班级名称显示在顶部。
• 50px 按您想要的尺寸。

输入代码后，点击 保存。

图标大小将根据您输入的值进行更新：

步骤 4：预览结果

发布之后：

• 预览您的页面。
• 检查图标大小是否与按钮文字大小协调。
• 测试桌面端和移动端的布局效果。

如果需要，请返回编辑器并再次调整尺寸值。

您可以重复此过程，直到图标大小符合您的设计要求。

如何选择合适的图标尺寸

正确的图标大小取决于按钮大小和文本样式。

以下是一些常用的尺寸范围：

以这些范围为起点，然后根据您的布局进行调整。