在按钮内对齐文本/图标

Question

I've tried many different things on the web and from SO and again can't seem to get this to work. First time I've been changing / styling my buttons and they're driving me mad! So I have a left floated button on the same line as my right floated button now. I'd like to see if I can have the icon to the left of the text on the left button and the right of the text on the right button. Like this:

<- Last Page //////////////////////////////////////////////// Next Page ->

<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

For some reason on the above fiddle it doesn't seem to be showing the font awesome arrows?

Thank you so much!

S.

Answer 1

Just insert te font-awsome icons whit the <i> element:

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

Here is an updated fiddle: https://jsfiddle.net/n6bpvdf5/1/

Answer 2

class will be fa fa-arrow-right not icon fa-arrow-right .

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

It's always best practice to use <i> tag when you use a font awesome icon

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