Trumbowyg: Using Font Awesome Icons instead of SVG

[HyperBlade]

I've been trying to use http://fontawesome.io/icons/ instead of SVG but I could not get it work. What steps should I do to use Font Awesome Icons?

[Alex-D]

https://alex-d.github.io/Trumbowyg/documentation/#svg-icons

You should probably disable Trumbowyg SVG icons by switch option to false. Then, use CSS to apply your own icons to Trumbowyg.

[thekrotek]

@Alex-D maybe you'll add an option to use SVG icons of FontAwesome? This font became a standard for displaying icons in various places, including editors. I mean, you can add definitions with FA icons to Trumbowyg CSS and if svgPath option is set to false, use these definitions. It's not that hard, really, but people will stop asking for FA icons. Otherwise similar requests will pop over and over.

[Alex-D]

I did not use FA in any project, and I did not have the time to check that... sorry.
But I will be happy to review your Pull Request ;)

[TonyVlcek]

In case that someone comes across of this issue searching for solution, I have created a Gist with CSS that makes the buttons use the FontAwesome icons: https://gist.github.com/TonyVlcek/0de8cbb185b6cfd10b9333828615d469

[thekrotek]

@TonyVlcek Thanks for sharing, pal!
@Alex-D You can add Tony's solution, if you don't have your own. It will only make your wonderful editor better.

[danlewis]

For Font Awesome 5 you could use CSS Pseudo-elements but it's highly not recommended to use this method accord to FA's docs.
Another simple way is insert into the buttons with the correct font class. Like so:

$('.editor').trumbowyg({
    svgPath: false,
    hideButtonTexts: true
  });
// Define your font awesome buttons to use
var fontAwesomeButtons = {
    "trumbowyg-viewHTML-button":        "fas fa-code",
    "trumbowyg-undo-button":            "fas fa-undo",
    "trumbowyg-redo-button":            "fas fa-redo",
    "trumbowyg-formatting-button":      "fas fa-paragraph",
    "trumbowyg-strong-button":          "fas fa-bold",
    "trumbowyg-em-button":              "fas fa-italic",
    "trumbowyg-del-button":             "fas fa-strikethrough",
    "trumbowyg-superscript-button":     "fas fa-superscript",
    "trumbowyg-subscript-button":       "fas fa-subscript",
    "trumbowyg-link-button":            "fas fa-link",
    "trumbowyg-insertImage-button":     "far fa-image",
    "trumbowyg-justifyLeft-button":     "fas fa-align-left",
    "trumbowyg-justifyCenter-button":   "fas fa-align-center",
    "trumbowyg-justifyRight-button":    "fas fa-align-right",
    "trumbowyg-justifyFull-button":     "fas fa-align-justify",
    "trumbowyg-unorderedList-button":   "fas fa-list-ul",
    "trumbowyg-orderedList-button":     "fas fa-list-ol",
    "trumbowyg-horizontalRule-button":  "fas fa-minus",
    "trumbowyg-removeformat-button":    "fas fa-eraser",
    "trumbowyg-fullscreen-button":      "fas fa-expand-arrows-alt"
  }

// Loop through each button, insert an <i> element with the correct class
  $('.trumbowyg-button-pane button').each( function(i,el){
    var btnClass = $(el).attr('class').split(' ')[0];
    var faClass = fontAwesomeButtons[btnClass];
    $(el).html('<i class="'+faClass+'"></i>');
  })