用图标替换按钮文本而不更改按钮大小的 DRY 方法答案

【问题标题】：DRY way to replace button text with icon without changing button size用图标替换按钮文本而不更改按钮大小的 DRY 方法
【发布时间】：2016-06-03 13:35:35
【问题描述】：

在我的网络应用中，我有各种提交按钮。我可以在用户提交后禁用它们，以防止多个发布请求和提交到服务器。我还用字体很棒的微调器图标替换了按钮的文本。 “批准”变为<i class="fa fa-spinner" aria-hidden="true"></i>。

<a class="btn btn-success" id="approve-button" rel="nofollow" data-method="post" href="/approve?id=40">
  Approve
</a>

#approve-button {
  height: 34px;
  width: 138px;
}

由于文本和字体大小决定了按钮的大小，当我用图标替换文本时，按钮会缩小。我看到防止这种情况的唯一方法是手动设置按钮的高度和宽度。但我必须对所有按钮都这样做。

有没有更简单的方法，我不必手动设置所有按钮的高度和宽度？

【问题讨论】：

min-width:138px ?或者只是找到最宽的按钮，然后将它们全部设置为那个？您还可以使用 jQuery 在单击时设置固定宽度，然后再更改为图像 - 这意味着即使您将文本放回原处，它也会保持大小。
fa 图标也是文本。所以也许你在某个地方为它设置了文本大小？
用类名而不是 ID 来设置它？
当您替换文本时 - 也为该元素设置宽度和高度
@SlackBadger 我所有的按钮都是不同的大小，我不希望在文本被图标替换时改变大小

标签： html css

【解决方案1】：

设置min-width & min-height 或通过获取现有宽度和高度，并在交换微调器的同时应用内联样式。

或

如果您想严格基于 CSS，您可以在按钮内设置两个 span 元素：一个用于微调器，一个用于按钮标签。因此，将跨度微调器定位absolute 位于按钮上方，当微调器位于active (display: block) 时，隐藏跨度标签(visibility: hidden) - 这将保持按钮的比例.

为了演示：从 TheEarlyMan 的答案中分叉出来：http://codepen.io/brh55/pen/yJNbmP

【讨论】：

【解决方案2】：

不确定这是否是您要找的，但here's a solution codepen link

HTML

<a class="btn btn-success" id="approve-button" rel="nofollow" >
  <span>Approve</span>
  <i class="fa fa-spinner"></i>
</a>

jQuery $(".fa").hide();

$("#approve-button").click(function() {
  $("span").hide();
  $(".fa").show();
});

【讨论】：