Less to replace Font Awesome icons on editor buttons

To change the Font Awesome icons of the editor buttons, just add such code to extra.less.

.editor-button-id(@buttonId; @fa-uid; @color: false) {
    .fr-toolbar {
        .fr-command {
            &[data-cmd="@{buttonId}"] {
                i:before {
                    & when (iscolor(@color)) {
                        color: @color;
                    }
                    & when (isurl(@fa-uid)) {
                        content: @fa-uid;
                    }
                    & when not (isurl(@fa-uid)) {
                        content: "\@{fa-uid}";
                    }
                }
            }
        }
    }
}

.editor-button-id(clearFormatting; f040; red);
.editor-button-id(strikeThrough; url('url link icon'));

Now let’s take a look at the example of the finished code, how can we change the icon for the editor button or several.
Everything is quite simple, we do not need to duplicate this whole large section of code, just one line is enough.
.editor-button-id(clearFormatting; f040; red);
.editor-button-id(@buttonId; @fa-uid; @color: false); - this is a variable that takes three parameters, separated by semicolons.

• Button id - @buttonId;
• Unicode Font Awesome icons or url with image - @fa-uid;
• Icon color is @color; this parameter is optional

In our example, this.

• Button id - clearFormatting and strikeThrough
• Unicode Font Awesome icons or url with image - f040
• Icon color - this parameter is optional so it may be absent

Let's say we need to change the icon for a message control button or several
Just duplicate this line: .editor-button-id(@buttonId; @fa-uid; @color: false);
Under the existing one. And slightly change for the desired editor button.