Extending wagtail icon font set

[Matt]

I would like to have a wider choice of icons to use when adding icons to represent the different content types in StreamFields. The existing wagtail font icon set is pretty limited. As it seems the wagtail icons are based on FontAwesome, is there a simple way to access all the other FontAwesome icons that aren't already included in the wagtail font itself?

[Dave Cranwell]

An example for doing just this can be found in the Hooks documentation for the "insert_editor_css" hook here:

http://wagtail.readthedocs.org/en/latest/reference/hooks.html?highlight=insert_editor_css

[Matt]

Ah thanks, I missed that!

[Matt]

For anyone else trying to do the same thing as I was...

As well as adding the hook pointing to your FontAwesome CSS file, you'll need to update the CSS file itself to replace all references to '.fa-' with '.icon-fa-' since Wagtail prepends the classname you specify in the StreamField content type 'icon' attribute with 'icon-'.

You'll also need to override the font-family style rule in wagtailadmin/scss/core.scss by adding the following, either at the top of the FontAwesome CSS file itself, or in a seperate CSS file which you can also add to the hooks file:

.object .stream-menu button:before {

    font-family: "FontAwesome" !important;

}

Hope this helps.

[Vincent Loy]

oh thanks!! This little CSS rule solved my problem ! :)