1

Some of the buttons on the toolbar has invalid icons when using the latest version of font-awesome 5.3.

Anyone has a good workaround until ngx-editor supports 5.3?

  • "image"-button: fa-picture-o has been replaced with fa-image
  • "unlink"-button: fa-chain-broken has been replaced with fa-unlink

enter image description here

...Hoping that someone has solved this in their project! :)

Thank you!

Marius
  • 199
  • 9

1 Answers1

2

I read the documentation but could not find any way to change the icons

For now my solution is by replacing the (style)classes in the ngAfterViewChecked lifecycle hook.

If you don't use the ngAfterViewChecked lifecycle hook you'll be replacing the classes before they exist. (e.g. they wont be found cause the editor is not in the DOM yet)

I hope this (temporary and ugly) solution works for the time being.

ngAfterViewChecked() {
    this.replaceFontAwesomeIcons('fa-scissors',  'fa-cut');
    this.replaceFontAwesomeIcons('fa-files-o',  'fa-copy');
    this.replaceFontAwesomeIcons('fa-repeat',  'fa-redo');
    this.replaceFontAwesomeIcons('fa-picture-o',  'fa-image');
  }

private replaceFontAwesomeIcons(currentClassName: string, newClassName: string) {
    const icons = document.getElementsByClassName(currentClassName);
    for (let i = 0; i < icons.length; i++) {
      icons.item(i).classList.add(newClassName);
      icons.item(i).classList.remove(currentClassName);
    }
  }
Napinator
  • 500
  • 2
  • 12
  • Thanks for this - Hopefully ngx-editor gets updated eventually... Even though it's been awhile.. :) – Marius Apr 01 '19 at 10:25