Trix Editor Toolbar Icons with FontAwesome

trix_editor.css

trix-toolbar .button_group button::before {
  background-image: none !important;
  font-family: 'FontAwesome';
  font-size: 12px;
  line-height: 28px;
}

trix-toolbar .button_group button.bold:before {
  content: '\f032';
}

trix-toolbar .button_group button.italic::before {
  content: '\f033';
}

trix-toolbar .button_group button.link::before {
  content: '\f0c1';
}

trix-toolbar .button_group button.strike::before {
  content: '\f0cc';
}

trix-toolbar .button_group button.quote::before {
  content: '\f10e';
}

trix-toolbar .button_group button.code::before {
  content: '\f121';
}

trix-toolbar .button_group button.bullets::before {
  content: '\f0ca';
}

trix-toolbar .button_group button.numbers::before {
  content: '\f0cb';
}

trix-toolbar .button_group button.block-level.decrease::before {
  content: '\f03b';
}

trix-toolbar .button_group button.block-level.increase::before {
  content: '\f03c';
}

trix-toolbar .button_group button.undo::before {
  content: '\f0e2';
}

trix-toolbar .button_group button.redo::before {
  content: '\f01e';
}

Thanks for your code -- it was helpful in getting mine started with the latest Trix Editor and using Font Awesome Pro. See https://gist.github.com/rickychilcott/44baf8e6b90b5ef80d1612d7c5f5fdc8 this should work with some modifications with Font Awesome 5 (free version) just fine.