Question

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

由于text和font-size指示按钮的大小，当我用图标替换文本时，按钮会缩小。我看到防止这种情况的唯一方法是手动设置按钮的高度和宽度。但我必须为所有按钮执行此操作。

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

Answer 1

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

或

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

要证明：除了TheEarlyMan的回答：http://codepen.io/brh55/pen/yJNbmP

Answer 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”）隐藏（）;

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

DRY方式用图标替换按钮文本而不更改按钮大小

2 个答案: