不用更改按钮大小即可用图标替换按钮文本的干燥方法

Question

在我的整个Web应用程序中，我有各种提交按钮。我可以在用户提交后禁用它们，以防止多个帖子请求和提交到服务器。我还将按钮的文本替换为超棒的字体微调图标。“批准”变为<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;
}

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

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

Answer 1

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

要么

如果要严格基于CSS，则可以在按钮内设置两个span元素：一个用于微调器，一个用于按钮标签。因此，absolute将跨度微调器放置在按钮上方，当微调器为active（display: block）时，使跨度标签隐藏（visibility: hidden），这将保持按钮的比例。

演示：摘自TheEarlyMan的答案：http ://codepen.io/brh55/pen/yJNbmP