Editor toolbar button icon styling

Editor toolbar button icon styling

Brogan

XenForo moderator
Staff member
Brogan submitted a new resource:

Editor toolbar button icon styling - (Font) Awesome!

This simple guide will explain how to style the editor toolbar button icons.

The use of the browser inspector (F12 -> Elements) will be necessary to identify the id and data names ... or good guesswork.

If we check the code for the standard toolbar we see this in the browser inspector:

Read more about this resource...
 

Kruzya

Well-known member
Styling with data-cmd can be used also without !important, if we're increase our selector weight. For example, we can specify interested HTML-tag.
Less:
.fr-box button
{
    &[data-cmd="bold"] i
    {
        color: orange;
    }

    &[data-cmd="fontSize"] i
    {
        color: red;
    }
}

And also this don't colorize dropdown content:
1611401944473.png
 

Brogan

XenForo moderator
Staff member
Yes, I'm aware of that, but the CSS I provided is much simpler to understand for those who aren't familiar with less.
 
Top