对齐按钮内的文本/图标答案

【问题标题】：Aligning Text / Icon Within Button对齐按钮内的文本/图标
【发布时间】：2017-08-28 06:26:19
【问题描述】：

我在网上和 SO 上尝试了许多不同的东西，但似乎又无法让它发挥作用。我第一次改变/设计我的按钮，他们让我发疯！所以我现在有一个左浮动按钮和我的右浮动按钮在同一行。我想看看是否可以将图标放在左侧按钮上的文本左侧和右侧按钮上的文本右侧。像这样：

<span align="right">
<ul class="actions">
<li id="leftbutton"><a href="tfn.html" class="button special icon fa-arrow-left">TFN</a></li>
<li id="rightbutton"><a href="medical-indemnity-and-insurance.html" class="button special icon fa-arrow-right">Indemnity & Insurance</a></li>
</ul>
</span>

Fiddle

出于某种原因，上面的小提琴似乎没有显示字体真棒箭头？

非常感谢！

【问题讨论】：

标签： html css button icons alignment

【解决方案1】：

只需在<i> 元素中插入字体很棒的图标：

<span align="right">
  <ul class="actions">
     <li id="leftbutton"><a href="tfn.html" class="button special icon"><i class="fa fa-arrow-left" aria-hidden="true"></i> TFN</a></li>
     <li id="rightbutton"><a href="medical-indemnity-and-insurance.html" class="button special icon ">Indemnity & Insurance <i class="fa fa-arrow-right" aria-hidden="true"></i></a></li>
  </ul>
</span>

这是一个更新的小提琴：https://jsfiddle.net/n6bpvdf5/1/

【讨论】：

【解决方案2】：

类将是 fa fa-arrow-right 而不是 icon fa-arrow-right。

喜欢 <a href="tfn.html" class="button special fa fa-arrow-left">TFN</a>

当您使用字体真棒图标时，最好使用<i> 标签

喜欢 <a href="tfn.html" class="button special"><i class="fa fa-arrow-left" aria-hidden="true"></i>TFN</a>

【讨论】：