Lo svantaggio maggiore nell'usare un framework CSS come Bootstrap sta nel fatto che occorre inserire degli elementi vuoti per visualizzare le varie icone del framework. Fortunatamente possiamo usare jQuery per salvare la semantica delle nostre pagine.

Possiamo creare il seguente plugin:


(function($) {

	$.fn.iconize = function(options) {
		options = $.extend({
			prefix: 'glyphicon',
			icon: 'glyphicon-list'
		}, options);
		return this.each(function() {
			var $element = $(this);
			var html = $element.html();
			var icon = '<span class="' + options.prefix + ' ' + options.icon + '"></span>';
			$element.html(icon + html);
		});
	};
	

})(jQuery);

Il plugin non fa altro che aggiungere alla marcatura di un elemento l'icona inserita tramite un elemento vuoto con le classi CSS di Bootstrap. Esempio d'uso:


$(function() {
	$('li', '#list').iconize();
	
});