Search code examples
rich-text-editorrichtextwagtailwagtail-streamfield

Use glyphicons or fontawesome icons within rich text


Is there an easy way to use glyphicons or fontawesome icons within the rich text?

Please have a look at the following CKEditor plugin I post here as an illustration of the question. https://www.michaeljanea.com/ckeditor/bootstrap-glyphicon

I failed to find a similar plugin for Wagtail.


Solution

  • A functional solution though having a sub-quality UX is to use raw HTML editing. Google provides few URLs on HTML editing within Hallo.js in Wagtail CMS. The most useful are as follows:

    1. docs. http://docs.wagtail.io/en/latest/reference/hooks.html
    2. example. https://git.sinnwerkstatt.com/cosinnus/cosinnus-core/blob/2989a6844733c732c7ca24c13cbcd30a0dc7f99d/cosinnus/wagtail_hooks.py

    After implementing the hook, it is possible to add glyphicons (and fontawesome), e.g. by adding

    <ul class="fa-ul">
        <li><i class="glyphicon glyphicon-user"></i>User icon</li>
        <li><i class="glyphicon glyphicon-home"></i>Home icon</li>
    </ul>