Ausrichten von Text/Icon innerhalb Button

Question

Ich habe viele verschiedene Dinge im Web und von SO ausprobiert und wieder scheint nicht zu funktionieren. Das erste Mal habe ich meine Knöpfe gewechselt/gestylt und sie machen mich verrückt! Ich habe also einen links schwebenden Knopf in der gleichen Zeile wie mein rechter schwebender Knopf. Ich würde gerne sehen, ob ich das Symbol links neben dem Text auf der linken Schaltfläche und rechts neben dem Text auf der rechten Schaltfläche haben kann. So:

< - Letzte Seite ////////////////////////////////////////// ///////// Nächste Seite ->

<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

Aus irgendeinem Grund auf der obigen Geige es scheint nicht, zeigt die Schrift ehrfürchtige Pfeile zu sein?

Vielen Dank!

S.

Answer 1

einfach einfügen te font-ehrfürchtiges Icons Whit die <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> 

Hier ist eine aktualisierte Geige: https://jsfiddle.net/n6bpvdf5/1/

Answer 2

Klasse fa fa-arrow-right wird nicht icon fa-arrow-right.

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

Es ist immer am besten Praxis <i>-Tag zu verwenden, wenn Sie eine Schriftart ehrfürchtigen Symbol verwenden

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