首页 > 解决方案 > ngx-editor with font-awesome 5+

问题描述

使用最新版本的 font-awesome 5.3 时,工具栏上的某些按钮图标无效。

在 ngx-editor 支持 5.3 之前,任何人都有一个好的解决方法吗?

在此处输入图像描述

...希望有人在他们的项目中解决了这个问题!:)

谢谢!

标签: angularfont-awesome-5ngx-editor

解决方案


我阅读了文档,但找不到任何更改图标的方法

现在我的解决方案是替换 ngAfterViewChecked 生命周期钩子中的(样式)类。

如果您不使用 ngAfterViewChecked 生命周期挂钩,您将在类存在之前替换它们。(例如它们不会被发现,因为编辑器还没有在 DOM 中)

我希望这个(临时和丑陋的)解决方案暂时有效。

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);
    }
  }

推荐阅读