如何更改 trix 文本編輯器工具欄按鈕圖標的字體顏色

Question

我想更改按鈕圖標的字體顏色。

我用 sass 嘗試了以下操作：

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

它只改變背景顏色，如下所示：

我只發現了關於如何在工具欄中添加新按鈕的不同方法。 這兩個對我來說看起來最有希望：

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

https://jsfiddle.net/34sd91hv/

Answer 1

我發現他們使用材料圖標並且可以替換它們： https://github.com/basecamp/trix/issues/464

像這樣關於你的路徑的東西也會起作用：

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

該代碼段位於 sass 中，您可以轉換為 css 或 scss 甚至使用.svg 文件。