对齐按钮内的文本/图标

Question

我在网上尝试了很多不同的东西，并从这里再次似乎无法得到这个工作。第一次我改变/造型我的按钮，他们让我发疯！所以我现在有一个左浮动按钮与我右浮动按钮在同一行上。我想看看我是否可以在左侧按钮的文本左侧和右侧按钮上的文本右侧有图标。像这样：

< - 最后一页/////////////////// /////////下一页 - >

<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

有关上述拨弄某种原因，它似乎没有被示出的字体真棒箭头？

非常感谢！

S.

Answer 1

只需插入TE字体要命图标白衣<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>

它总是最好的做法，当您使用的字体真棒图标

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