Font Awesome makes use of empty elements to insert icons within a document. We can automate this process with jQuery.
We can create the following plugin:
(function( $ ) {
$.fn.fa = function( options ) {
options = $.extend({
icon: "home",
where: "before"
}, options);
return this.each(function() {
var $element = $( this );
var icon = "<i class='fa fa-" + options.icon + "'></i>";
$element[options.where]( icon );
});
};
})( jQuery );
Example:
$(function() {
$( ".title" ).fa({
icon: "user",
where: "after"
});
});