Trix Editor and Font Awesome Pro Override

actiontext.scss

@mixin transparent {
  color: transparent;
}

@mixin override-trix-icon($icon, $content) {
  button.trix-button--icon-#{$icon} {
    &::before {
      content: $content;
    }
  }
}

trix-toolbar {

  .trix-button-group {
    button {
      &::before {
        background-image: none !important;
        font-family: "Font Awesome 5 Pro";
        font-weight: 900;
        color: black;
      }
    }

    &.trix-button-group--file-tools {
      display: none;
    }


    @include override-trix-icon("bold", "\f032");
    @include override-trix-icon("italic", "\f033");
    @include override-trix-icon("link", "\f0c1");
    @include override-trix-icon("strike", "\f0cc");
    @include override-trix-icon("heading-1", "\f1dc");
    @include override-trix-icon("quote", "\f10e");
    @include override-trix-icon("code", "\f121");
    @include override-trix-icon("bullet-list", "\f0ca");
    @include override-trix-icon("number-list", "\f0cb");
    @include override-trix-icon("decrease-nesting-level", "\f03b");
    @include override-trix-icon("increase-nesting-level", "\f03c");
    @include override-trix-icon("undo", "\f0e2");
    @include override-trix-icon("redo", "\f01e");
  }

  .trix-button--icon {
    text-indent: inherit;
    @include transparent;

    &.trix-active {
      @include transparent;
    }
  }

  .trix-button:disabled {
    @include transparent;
  }

}