David Scotson

In your screenshot you've got #gridiconcontainer, but in your github gist you've got #gridicon-container (with an extra hyphen).

Just a quick guess, but since the LI is 212px wide, don't you know that the UL is 3x that, so 636px? And then with that width specified, can't you just set the margins to auto?

If you could rely on a grid system (like Bootstrap's) being available then this is basically what they're for.

You can use them (and many other exciting Bootstrap styles) anywhere you can add HTML.

If you're comfortable with HTML then the basic format is:

<i class="icon-pencil"></i>

The original purpose of Font Awesome was to replace the Glyphicons from Bootstrap 2.3.2 (which used a single large image with all the icons in it, rather than a font) so the basic HTML is compatible with the examples in their documentation:

http://getbootstrap.com/2.3.2/base-css.html#icons

Many of the Bootstrap things can actually be copied and pasted directly into the TinyMCE editor, though I note with this particular feature TinyMCE tries to be helpful and changes the i tag to an em tag, and the icon font becomes italicized.

I believe the non-expanding course categories is a Moodle bug, MDL-40750.

This is presumably a renderer that, could be copied into other themes by suitably adventurous themers?