html - 对齐按钮内的文本/图标

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> 

Fiddle

出于某种原因，上面的 fiddle 似乎没有显示字体很棒的箭头？

非常感谢!

S.

Answer 1

只需在 <i> 中插入 te font-awsome 图标元素:

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

这是一个更新的 fiddle :https://jsfiddle.net/n6bpvdf5/1/