Wysiwyg-editor: We need Support for Font Awesome 5

[gae123]

Expected behavior.

Just upgraded our site to font awesome-5 using the provided shim. We expected everything to work

Actual behavior.

Froala toolbar looks bad:

1. Each icon takes variable amount of space
2. Wherever there is a caret it shows on top of the previous icon

[bmichotte]

As a really really ugly workaround for missing icons, I use this until froala will support FA5

$('.my-textarea').on('froalaEditor.initialized', (e, editor) => {
    editor.$box.find('.fr-toolbar').find('i').each((_, i) => {
        const $i = $(i);

        $i.removeClass('fa')
            .addClass('fa-lg')
            .addClass('fal')
            .css({fontSize: 'inherit'});

        const replace = {
            'fa-rotate-left': 'fa-undo',
            'fa-rotate-right': 'fa-redo',
            'fa-video-camera': 'fa-camera-retro',
            'fa-file-o': 'fa-file'
        }

        Object.keys(replace).forEach(key => {
            if ($i.hasClass(key)) {
                $i.removeClass(key).addClass(replace[key])
            }
        })
    })
});

[chrisdeeming]

FWIW, you can probably just do this:

$.FE.DefineIcon('undo', { NAME: 'undo' });
$.FE.DefineIcon('redo', { NAME: 'redo' });

[stefanneculai]

@gae123 last commit should do the trick. Please follow the instructions from for including the shim https://fontawesome.com/how-to-use/upgrading-from-4.

[robclancy]

@stefanneculai do you have a rough estimation on when this will be flagged as a release and for the ember version to follow suit?

[brandoncordell]

@gae123 @robclancy in the meantime if you switch to using web fonts with FA5, it will work properly (still need the shim). They're directly styling i tags in their css, so you don't want FA5 to change those to SVG.

[robclancy]

Our update still won't be out for a week or 2 that includes the font awesome update so can probably wait. And I don't like that they force old icons to work with the new ones, I want them both to be able to work together during a transition period but they have hardcoded it in FA5 to use SVG icons for FA4. So I am more likely to run a custom version with that stuff hacked out (it's 3 lines I need to comment out to make it work, FA5 should have it wrapped in an option tbh).