How to automatically insert Font Awesome icons with jQuery

How to automatically insert Font Awesome icons with jQuery

Font Awesome makes use of empty elements to insert icons within a document. We can automate this process with jQuery.

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"
	});
});