Adding Tab Icons to NicePanel Tabs

I almost published without this feature, but at the last second I thought to myself - it only adds 7 characters to each tab HTML to make this possible - and people will love it when they learn how easy it is to put into use. Let's add some tab icons!

So, let's get started.

The Tab ID

Each panel tab is created from the Title attribute of the module contained within the tab output. Title isn't the only detail I grabbed from the module when it was retrieved - the ID of the module is present as well, used in the ID of each tab. So, if your module is ID 114 - the tab for that module will have an ID of plg_system_nicepanel_<top or bottom>_tab_114 - that's ugly, let's say the tab is in the top panel; the tab CSS ID would be plg_system_nicepanel_top_tab_114. This give us some flexibility when styling. First, each tab can be individually styled - colors, fonts, whatever. But for this example, we're going to take advantage of the that's placed inside of each tab.

Let's assume you're using FontAwesome elsewhere in your site. It's built-in, it's awesome (as implied by the name), and why not use it? So let's apply some styles to that tag to give it an icon. First we need to identify the icon we want to use. Head over to...

fontawesome.com/v5/search

Find your icon - for this tutorial, I'm choosing the Knight Chess piece. You'll actually need to click on the icon to get its popup window, where you're looking for its unicode value (4 alphanumeric digits, top right). For the Knight - it's f441 (circled in red)

Putting It Together

We know the ID: plg_system_nicepanel_top_tab_114
We know the icon unicode: f441
We have the will!
We have the desire!
I have no shoes on - irrelevant, but accurate.
Now, the easy part!

You'll need to add some CSS to your template. Alternatively, you could use my System - Head Tag plugin to do it. Either way, this is what you're adding:

#plg_system_nicepanel_top_tab_114 {
    & i {
        font-family: 'Font Awesome 6 Free';
    }
    & i:before {
        content: "\f441";
        font-style: normal;
        margin-right: 0.2rem;
    }
}

This sets the icon to the FontAwesome unicode value, and sets the font to Font Awesome. Additionally it takes away the italics (a side effect of me using the tag instead of , and adds a bit of margin to space the icon away from the words of the tab.

Adding Lots of Tab Icons

If you were going add a tab icon to everything, there's a change you could make to reduce the amount of CSS you need to write. It starts with assigning the font, style, and margin to everything up front, and then putting the unicode into the individual tabs second. It looks like this:

#plg_system_nicepanel_top {
    & i {
        font-family: 'Font Awesome 6 Free';
    }
    & i:before {
        font-style: normal;
        margin-right: 0.2rem;
    }
}
#plg_system_nicepanel_top_tab_114 i:before { content: "\f441"; }
#plg_system_nicepanel_top_tab_115 i:before { content: "\f442"; }
#plg_system_nicepanel_top_tab_116 i:before { content: "\f443"; }

Examples