Font Awesome – Javascript get all the glyphs

I was searching the internet for a way to get all the icon characters in FontAwesome and display them in a list. A JSON list seemed like a pretty good solution, but it requires time to maintain. But what if we could render all the characters in the font range and choose the ones that are non-empty?

This is where it became complicated. There was no default way to know if a glyph existed or not and no index of an empty glyph. Browsers like Opera were making this even harder to do since they were overwriting the default font.

After some serious tweaking and testing, Firefox and Safari found all the glyphs, Chrome, Opera and IE( 7 and 8 ) found 247 of the 249 icons in the font. Looked like a pretty good result so why not sharing, in case everyone ever needs this.

To use paste the following code anywhere inside your body tag.

<div id='glypher' style="font-family:FontAwesome;overflow:hidden;width:1px;height:1px;line-height:1em;font-size:1000px">&#xefff;</div>

And include these into the page head along with jQuery and the Font Awesome css file:

<script src='jquery.pubsub.js'></script>
<script src='jquery.fontawesome.js'></script>

And then do something with the list:

$.iconGlyphs( function( list ){
	// Alert the list length
	alert( list.length );

	// or create a new icon
	var icon = document.createElement( 'div' );
	icon.className = 'icon-g';
	icon.innerHTML = String.fromCharCode( list[ 0 ] );
})


Like i did below:

 

Grab PubSub from here, download the script and you’re ready to go.