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>
For some reason on the above fiddle it doesn't seem to be showing the font awesome arrows?
Thank you so much!
S.
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/