FontAwesome icons for Trumbowyg

trumbowyg-fontawesome-icons.css

.trumbowyg-viewHTML-button:after {
	font-family: FontAwesome;
	content: "\f121";
}

.trumbowyg-undo-button:after {
	font-family: FontAwesome;
	content: "\f0e2";
}

.trumbowyg-redo-button:after {
	font-family: FontAwesome;
	content: "\f01e";
}

.trumbowyg-formatting-button:before {
	font-family: FontAwesome;
	content: "\f1dd";
}

.trumbowyg-strong-button:after {
	font-family: FontAwesome;
	content: "\f032";
}

.trumbowyg-em-button:after {
	font-family: FontAwesome;
	content: "\f033";
}

.trumbowyg-del-button:after {
	font-family: FontAwesome;
	content: "\f0cc";
}

.trumbowyg-superscript-button:after {
	font-family: FontAwesome;
	content: "\f12b";
}

.trumbowyg-subscript-button:after {
	font-family: FontAwesome;
	content: "\f12c";
}

.trumbowyg-link-button:before {
	font-family: FontAwesome;
	content: "\f0c1";
}

.trumbowyg-insertImage-button:after {
	font-family: FontAwesome;
	content: "\f03e";
}

.trumbowyg-justifyLeft-button:after {
	font-family: FontAwesome;
	content: "\f036";
}

.trumbowyg-justifyCenter-button:after {
	font-family: FontAwesome;
	content: "\f037";
}

.trumbowyg-justifyRight-button:after {
	font-family: FontAwesome;
	content: "\f038";
}

.trumbowyg-justifyFull-button:after {
	font-family: FontAwesome;
	content: "\f039";
}

.trumbowyg-unorderedList-button:after {
	font-family: FontAwesome;
	content: "\f03a";
}

.trumbowyg-orderedList-button:after {
	font-family: FontAwesome;
	content: "\f0cb";
}

.trumbowyg-horizontalRule-button:after {
	font-family: FontAwesome;
	content: "\f068";
}

.trumbowyg-removeformat-button:after {
	font-family: FontAwesome;
	content: "\f12d";
}

.trumbowyg-fullscreen-button:after {
	font-family: FontAwesome;
	content: "\f0b2";
}

.trumbowyg-bold-button:after {
	font-family: FontAwesome;
	content: "\f032";
}

.trumbowyg-italic-button:after {
	font-family: FontAwesome;
	content: "\f033";
}

.trumbowyg-underline-button:after {
	font-family: FontAwesome;
	content: "\f0cd";
}

.trumbowyg-strikethrough-button:after {
	font-family: FontAwesome;
	content: "\f0cc";
}

.trumbowyg-foreColor-button:before {
	font-family: FontAwesome;
	content: "\f031";
}

.trumbowyg-backColor-button:before {
	font-family: FontAwesome;
	content: "\f031";
	color: #ecf0f1;
	background-color: #555555;
	padding: 1px;
	font-size: 85%;
	line-height: 200%;
}


/*===== DROPDOWN BUTTONS =====*/

.trumbowyg-p-dropdown-button:before {
	font-family: FontAwesome;
	content: "\f1dd";
	margin-right: 10px;
}

.trumbowyg-blockquote-dropdown-button:before {
	font-family: FontAwesome;
	content: "\f10d";
	margin-right: 10px;
}

.trumbowyg-h1-dropdown-button:before,
.trumbowyg-h2-dropdown-button:before,
.trumbowyg-h3-dropdown-button:before,
.trumbowyg-h4-dropdown-button:before {
	font-family: FontAwesome;
	content: "\f1dc";
	margin-right: 10px;
}

.trumbowyg-createLink-dropdown-button:before {
	font-family: FontAwesome;
	content: "\f0c1";
	margin-right: 10px;
}

.trumbowyg-unlink-dropdown-button:before {
	font-family: FontAwesome;
	content: "\f127";
	margin-right: 10px;
}

When you want to use these FontAwesome icons, make sure that you turn off the original svg icons and hide the text:

$.trumbowyg.svgPath = false;
$.trumbowyg.hideButtonTexts = true;

Thanks, pal! Much appreciated. A few icons are missing though:

.trumbowyg-bold-button:after {
	font-family: FontAwesome;
	content: "\f032";
}

.trumbowyg-italic-button:after {
	font-family: FontAwesome;
	content: "\f033";
}

.trumbowyg-underline-button:after {
	font-family: FontAwesome;
	content: "\f0cd";
}

.trumbowyg-strikethrough-button:after {
	font-family: FontAwesome;
	content: "\f0cc";
}

.trumbowyg-foreColor-button:before {
	font-family: FontAwesome;
	content: "\f031";
}

.trumbowyg-backColor-button:before {
	font-family: FontAwesome;
	content: "\f031";
	color: #ecf0f1;
	background-color: #555555;
	padding: 1px;
	font-size: 85%;
	line-height: 200%;
}

Thanks, I'm updating the gist and my code to include these :)

Thanks, this is super useful.

You are missing an icon for the table plugin:

.trumbowyg-table-button:before{
    font-family: FontAwesome;
    content: "\f0ce";
} 

It's working on desktop, however does not seem to be working on Android+Chrome for me, it shows up as squares

Thanks for this! I'm using with FontAwesome 5 and SASS in a Rails project here. This allows DRYing up the font-family declarations:

button[class^="trumbowyg-"] {
  @extend .fa !optional;
  @extend .fas !optional;
  &:before {
    font-family: 'Font Awesome 5 Free';
  }
}