Skip to content

Instantly share code, notes, and snippets.

@TonyVlcek
Last active June 1, 2020 07:35
Show Gist options
  • Save TonyVlcek/0de8cbb185b6cfd10b9333828615d469 to your computer and use it in GitHub Desktop.
Save TonyVlcek/0de8cbb185b6cfd10b9333828615d469 to your computer and use it in GitHub Desktop.
FontAwesome icons for Trumbowyg
.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;
}
@unRARed
Copy link

unRARed commented Jun 1, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment