在WordPress中如何仅放大按钮内图标（不改变文字大小，附现有CSS）

嘿，我来帮你搞定这个问题！要实现只放大按钮里的图标而不改变文字大小，核心思路是单独选中按钮内的图标元素来调整样式，而不是给整个按钮统一设置。具体操作步骤如下：

1. 先确认按钮内图标的HTML结构 #

首先你得搞清楚按钮里的图标是用什么标签渲染的——常见的是<i>标签（比如Font Awesome这类图标库）、<svg>或者带自定义类名的<span>。举个例子，如果是Font Awesome图标，它的标签大概是<i class="fa fa-arrow-right"></i>。

2. 在WordPress中添加自定义CSS #

WordPress里添加自定义CSS有两种常用方式，选你顺手的来：

方法一：通过主题自定义面板添加 #

• 登录WordPress后台，依次进入「外观」→「自定义」→「额外CSS」（部分主题可能叫「自定义CSS」，位置差不多）
• 把下面的代码粘贴进去，根据你实际的图标标签/类名调整：

/* 仅放大指定按钮内的图标，保持文字大小不变 */
.nectar-button.fixed-size-energy i {
  font-size: 30px; /* 这里设置你想要的图标尺寸，比按钮原有的22px大即可 */
  vertical-align: middle; /* 让图标和文字垂直居中对齐，避免错位 */
  margin-right: 8px; /* 图标在文字左侧时，加右侧间距分开两者；反之用margin-left */
}

如果你的图标是<svg>或者带自定义类，就把代码里的i换成对应的标签名或类名，比如.nectar-button.fixed-size-energy svg或者.nectar-button.fixed-size-energy .your-icon-class。

方法二：通过子主题的style.css文件添加 #

如果你在用子主题（推荐用子主题避免主题更新丢失自定义样式），可以：

• 通过FTP工具连接服务器，找到子主题文件夹下的style.css；或者在后台进入「外观」→「主题文件编辑器」，选中子主题的style.css
• 把上面的CSS代码粘贴到文件末尾，保存即可。

3. 验证效果 #

保存设置后，刷新前端页面就能看到效果啦：图标单独放大，文字还是保持原来的22px大小。如果图标和文字对齐有问题，可以微调vertical-align或者line-height参数来优化。

内容的提问来源于stack exchange，提问作者user193672