Font Awesome ha un unico difetto a livello di design del codice: ci costringe ad usare elementi non semantici vuoti per visualizzare le icone. Fortunatamente esiste jQuery.
Possiamo associare un'icona ad un elemento utilizzando gli attributi di dati e specificando la posizione dell'icona:
<div class="element" data-icon="fa-camera-retro" data-icon-position="before"></div>
Quindi con jQuery:
$( "[data-icon]" ).each(function() {
var $el = $( this ),
icon = $el.data( "icon" ),
position = $el.data( "icon-position" ),
iconElement = "<i class='fa " + icon + "'></i>";
if( position == "before" ) {
$el.prepend( iconElement );
} else {
$el.append( iconElement );
}
});