在按钮内对齐文本/图标

Question

我已经在网上尝试了很多不同的东西，从 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> 

小提琴

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

非常感谢！

S.

Answer 1

只需插入 te font-awsome 图标即可<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/

Answer 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>