javascriptcsstrix

How to change font color of button icons for trix text editor toolbar

I would like to change the color of the font color for the button icons.

I tried the following with sass:

trix-toolbar
  .trix-button
    background-color: $purple-dark-2
    color: $white

It changes only the backgrond color like so:

enter image description here

I only found different fiddles on how to add new buttons in the toolbar. These two looked the most promising to me:

https://codepen.io/souporserious/pen/dYZVYo?editors=100

https://jsfiddle.net/34sd91hv/

Solution

  • I found out that they use material icons and one can replace them: https://github.com/basecamp/trix/issues/464

    Something like this regarding your paths will work as well:

    trix-toolbar
  .trix-button--icon-bold::before
    background-image: url('../images/icon/baseline_format_bold_white_24dp.png')

    the snippet is in sass you can convert to css or scss and even use .svg files.