#  Examples 

 

##  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 <i></i> 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 <i> tag to give it an icon. First we need to identify the icon we want to use. Head over to...

## [fontawesome.com/v5/search](https://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)

![](https://cdn.richeyweb.com/images/articles/plg_system_nicepanel/examples/fa-knight.webp)

## 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](/software/joomla/plugins/system-headtag) plugin to do it. Either way, this is what you're adding:

 ```css
#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 <i> tag instead of <span>, and adds a bit of margin to space the icon away from the words of the tab.

![](https://cdn.richeyweb.com/images/articles/plg_system_nicepanel/examples/Screenshot_20250320_174540.png)

## 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:

 ```css
#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"; }
```



- [      email ](mailto:?subject=Adding+Tab+Icons+to+NicePanel+Tabs&body=https%3A%2F%2Fwww.richeyweb.com%2Fsoftware%2Fexamples%2Fnicepanel%2Fadding-tab-icons-to-nicepanel-tabs)
- [      facebook ](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.richeyweb.com%2Fsoftware%2Fexamples%2Fnicepanel%2Fadding-tab-icons-to-nicepanel-tabs)
- [      x-twitter ](https://twitter.com/intent/tweet?text=Adding+Tab+Icons+to+NicePanel+Tabs%3A+https%3A%2F%2Fwww.richeyweb.com%2Fsoftware%2Fexamples%2Fnicepanel%2Fadding-tab-icons-to-nicepanel-tabs)
- [      linkedin ](http://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.richeyweb.com%2Fsoftware%2Fexamples%2Fnicepanel%2Fadding-tab-icons-to-nicepanel-tabs&title=Adding+Tab+Icons+to+NicePanel+Tabs&summary=I+almost+published+without+this+feature%2C+but+at+th...)
- [      pinterest ](http://pinterest.com/pin/create/button/?url=https%3A%2F%2Fwww.richeyweb.com%2Fsoftware%2Fexamples%2Fnicepanel%2Fadding-tab-icons-to-nicepanel-tabs&media=https%3A%2F%2Fwww.richeyweb.com%2Fimages%2Farticles%2Fplg_system_nicepanel%2Fexamples%2Ffa-knight.webp&description=Adding+Tab+Icons+to+NicePanel+Tabs)
 


 

 

##### We Value Your Privacy

 

We use cookies to enhance your experience and for traffic analysis. By continuing to visit this site you agree to our use of cookies.

[Privacy Policy](/privacy-policy)

 Details 

###### Google Tag Manager Items

- Ad Storage
- Ad User Data
- Ad Personalization
- Analytics Storage
- Functionality Storage
- Personalization Storage
- Security Storage
 
 

 

 

 

 

 Decline Accept
```json
{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://www.richeyweb.com/#organization","name":"RicheyWeb","url":"https://www.richeyweb.com/","logo":{"@type":"ImageObject","url":"https://www.richeyweb.com/images/logo/richeyweb.svg","contentUrl":"https://www.richeyweb.com/images/logo/richeyweb.svg","width":{"@type":"QuantitativeValue","value":38,"unitCode":"PX"},"height":{"@type":"QuantitativeValue","value":38,"unitCode":"PX"},"@id":"https://www.richeyweb.com/#logo"},"image":{"@id":"https://www.richeyweb.com/#logo"},"sameAs":["https://x.com/ComRicheyweb","https://www.facebook.com/RicheyWebDev/","https://www.youtube.com/channel/UCxnVG8BwOvQRO7hVqNX7T2g","https://community.joomla.org/service-providers-directory/listings/115:richeyweb.html"],"description":"RicheyWeb is a custom software developer specializing in Joomla extensions.","ContactPoint":[{"@type":"ContactPoint","url":"https://www.richeyweb.com/contact-us","telephone":"903-873-8460","contactType":"Owner/Administrator","areaServed":["United States",{"@type":"Country","name":"United States","sameAs":["https://en.wikipedia.org/wiki/United_States","https://www.wikidata.org/wiki/Q30","https://g.co/kg/m/09c7w0"]},"European Union",{"@type":"AdministrativeArea","name":"European Union","sameAs":["https://en.wikipedia.org/wiki/European_Union","https://www.wikidata.org/wiki/Q458","https://g.co/kg/m/0_6t_z8"]},"United Kingdom",{"@type":"Country","name":"United Kingdom","sameAs":["https://en.wikipedia.org/wiki/United_Kingdom","https://www.wikidata.org/wiki/Q145","https://g.co/kg/m/07ssc"]},"Australia",{"@type":"Country","name":"Australia","sameAs":["https://en.wikipedia.org/wiki/Australia","https://www.wikidata.org/wiki/Q408","https://g.co/kg/m/0chghy"]},"Canada",{"@type":"Country","name":"Canada","sameAs":["https://en.wikipedia.org/wiki/Canada","https://www.wikidata.org/wiki/Q16","https://g.co/kg/m/0d060g"]},"Russia",{"@type":"Country","name":"Russia","sameAs":["https://en.wikipedia.org/wiki/Russia","https://www.wikidata.org/wiki/Q159","https://g.co/kg/m/06bnz"]},"China",{"@type":"Country","name":"China","sameAs":["https://en.wikipedia.org/wiki/China","https://www.wikidata.org/wiki/Q148","https://g.co/kg/m/0d05w3"]}],"availableLanguage":"en"},{"@type":"ContactPoint","url":"https://www.richeyweb.com/bugs","telephone":"903-873-8460","contactType":"Technical Support","areaServed":["United States",{"@type":"Country","name":"United States","sameAs":["https://en.wikipedia.org/wiki/United_States","https://www.wikidata.org/wiki/Q30","https://g.co/kg/m/09c7w0"]},"European Union",{"@type":"AdministrativeArea","name":"European Union","sameAs":["https://en.wikipedia.org/wiki/European_Union","https://www.wikidata.org/wiki/Q458","https://g.co/kg/m/0_6t_z8"]},"United Kingdom",{"@type":"Country","name":"United Kingdom","sameAs":["https://en.wikipedia.org/wiki/United_Kingdom","https://www.wikidata.org/wiki/Q145","https://g.co/kg/m/07ssc"]},"Australia",{"@type":"Country","name":"Australia","sameAs":["https://en.wikipedia.org/wiki/Australia","https://www.wikidata.org/wiki/Q408","https://g.co/kg/m/0chghy"]},"Canada",{"@type":"Country","name":"Canada","sameAs":["https://en.wikipedia.org/wiki/Canada","https://www.wikidata.org/wiki/Q16","https://g.co/kg/m/0d060g"]},"Russia",{"@type":"Country","name":"Russia","sameAs":["https://en.wikipedia.org/wiki/Russia","https://www.wikidata.org/wiki/Q159","https://g.co/kg/m/06bnz"]},"China",{"@type":"Country","name":"China","sameAs":["https://en.wikipedia.org/wiki/China","https://www.wikidata.org/wiki/Q148","https://g.co/kg/m/0d05w3"]}],"availableLanguage":"en"}],"knowsAbout":["Computer programming",{"@type":"Thing","name":"Computer programming","sameAs":["https://en.wikipedia.org/wiki/Computer_programming","https://www.wikidata.org/wiki/Q80006","https://g.co/kg/m/01mf_"]},"PHP",{"@type":"Thing","name":"PHP","sameAs":["https://en.wikipedia.org/wiki/PHP","https://www.wikidata.org/wiki/Q59","https://g.co/kg/m/060kv"]},"JavaScript",{"@type":"Thing","name":"JavaScript","sameAs":["https://en.wikipedia.org/wiki/JavaScript","https://www.wikidata.org/wiki/Q2005","https://g.co/kg/m/02p97"]},"arduino","Computer forensics",{"@type":"Thing","name":"Computer forensics","sameAs":["https://en.wikipedia.org/wiki/Computer_forensics","https://www.wikidata.org/wiki/Q878553","https://g.co/kg/m/02wxbd"]},"White hat",{"@type":"Thing","name":"White hat","sameAs":["https://en.wikipedia.org/wiki/White_hat_(computer_security)","https://www.wikidata.org/wiki/Q7995625","https://g.co/kg/m/03ns_5"]},"Search engine optimization",{"@type":"Thing","name":"Search engine optimization","sameAs":["https://en.wikipedia.org/wiki/Search_engine_optimization","https://www.wikidata.org/wiki/Q180711","https://g.co/kg/m/019qb_"]},"Search engine marketing",{"@type":"Thing","name":"Search engine marketing","sameAs":["https://en.wikipedia.org/wiki/Search_engine_marketing","https://www.wikidata.org/wiki/Q846132","https://g.co/kg/m/06mw8r"]},"Digital marketing",{"@type":"Thing","name":"Digital marketing","sameAs":["https://en.wikipedia.org/wiki/Digital_marketing","https://www.wikidata.org/wiki/Q1323528","https://g.co/kg/g/122hcnps"]},"Web hosting service",{"@type":"Thing","name":"Web hosting service","sameAs":["https://en.wikipedia.org/wiki/Web_hosting_service","https://www.wikidata.org/wiki/Q5892272","https://g.co/kg/m/014pz4"]},"Email hosting service",{"@type":"Thing","name":"Email hosting service","sameAs":["https://en.wikipedia.org/wiki/Email_hosting_service","https://www.wikidata.org/wiki/Q5368818","https://g.co/kg/m/09w60m"]},"Internet hosting service",{"@type":"Thing","name":"Internet hosting service","sameAs":["https://en.wikipedia.org/wiki/Internet_hosting_service","https://www.wikidata.org/wiki/Q1210425","https://g.co/kg/m/09w5yw"]},"Virtual hosting",{"@type":"Thing","name":"Virtual hosting","sameAs":["https://en.wikipedia.org/wiki/Virtual_hosting","https://www.wikidata.org/wiki/Q588365","https://g.co/kg/m/024mvh"]},"Web performance",{"@type":"Thing","name":"Web performance","sameAs":["https://en.wikipedia.org/wiki/Web_performance","https://www.wikidata.org/wiki/Q7978612","https://g.co/kg/m/0gfj3f1"]},"Web content management system",{"@type":"Thing","name":"Web content management system","sameAs":["https://en.wikipedia.org/wiki/Web_content_management_system","https://www.wikidata.org/wiki/Q45211","https://g.co/kg/m/0615s2"]},"Content management system",{"@type":"Thing","name":"Content management system","sameAs":["https://en.wikipedia.org/wiki/Content_management_system","https://www.wikidata.org/wiki/Q131093","https://g.co/kg/m/0k23c"]},"General Data Protection Regulation",{"@type":"Thing","name":"General Data Protection Regulation","sameAs":["https://en.wikipedia.org/wiki/General_Data_Protection_Regulation","https://www.wikidata.org/wiki/Q1172506","https://g.co/kg/m/0pk_7xs"]},"SERP",{"@type":"Thing","name":"SERP","sameAs":["https://en.wikipedia.org/wiki/SERP","https://www.wikidata.org/wiki/Q2205811","https://g.co/kg/g/11c5szp7kc"]},"Artificial intelligence",{"@type":"Thing","name":"Artificial intelligence","sameAs":["https://en.wikipedia.org/wiki/Artificial_intelligence","https://www.wikidata.org/wiki/Q11660","https://g.co/kg/m/0mkz"]},"Prompt engineering",{"@type":"Thing","name":"Prompt engineering","sameAs":["https://en.wikipedia.org/wiki/Prompt_engineering","https://www.wikidata.org/wiki/Q108941486","https://g.co/kg/g/11p6kpgt_n"]},"E-learning",{"@type":"Thing","name":"E-learning","sameAs":["https://en.wikipedia.org/wiki/E-learning_(theory)","https://www.wikidata.org/wiki/Q182250","https://g.co/kg/g/122czm1f"]},"Sharable Content Object Reference Model",{"@type":"Thing","name":"Sharable Content Object Reference Model","sameAs":["https://en.wikipedia.org/wiki/Sharable_Content_Object_Reference_Model","https://www.wikidata.org/wiki/Q827811","https://g.co/kg/m/06_40"]},"Experience API",{"@type":"Thing","name":"Experience API","sameAs":["https://en.wikipedia.org/wiki/Experience_API","https://www.wikidata.org/wiki/Q7807728","https://g.co/kg/g/1yw9ktxr8"]},"Joomla",{"@type":"Thing","name":"Joomla","sameAs":["https://en.wikipedia.org/wiki/Joomla","https://www.wikidata.org/wiki/Q13167","https://g.co/kg/m/07qb81"]},"Nginx",{"@type":"Thing","name":"Nginx","sameAs":["https://en.wikipedia.org/wiki/Nginx","https://www.wikidata.org/wiki/Q306144","https://g.co/kg/m/02qft91"]},"MySQL",{"@type":"Thing","name":"MySQL","sameAs":["https://en.wikipedia.org/wiki/MySQL","https://www.wikidata.org/wiki/Q850","https://g.co/kg/m/04y3k"]}],"areaServed":["United States",{"@type":"Country","name":"United States","sameAs":["https://en.wikipedia.org/wiki/United_States","https://www.wikidata.org/wiki/Q30","https://g.co/kg/m/09c7w0"]},"European Union",{"@type":"AdministrativeArea","name":"European Union","sameAs":["https://en.wikipedia.org/wiki/European_Union","https://www.wikidata.org/wiki/Q458","https://g.co/kg/m/0_6t_z8"]},"United Kingdom",{"@type":"Country","name":"United Kingdom","sameAs":["https://en.wikipedia.org/wiki/United_Kingdom","https://www.wikidata.org/wiki/Q145","https://g.co/kg/m/07ssc"]},"Australia",{"@type":"Country","name":"Australia","sameAs":["https://en.wikipedia.org/wiki/Australia","https://www.wikidata.org/wiki/Q408","https://g.co/kg/m/0chghy"]},"Canada",{"@type":"Country","name":"Canada","sameAs":["https://en.wikipedia.org/wiki/Canada","https://www.wikidata.org/wiki/Q16","https://g.co/kg/m/0d060g"]},"Russia",{"@type":"Country","name":"Russia","sameAs":["https://en.wikipedia.org/wiki/Russia","https://www.wikidata.org/wiki/Q159","https://g.co/kg/m/06bnz"]},"China",{"@type":"Country","name":"China","sameAs":["https://en.wikipedia.org/wiki/China","https://www.wikidata.org/wiki/Q148","https://g.co/kg/m/0d05w3"]}],"memberOf":["Mensa International",{"@type":"Organization","name":"Mensa International","sameAs":["https://en.wikipedia.org/wiki/Mensa_International","https://www.wikidata.org/wiki/Q184194","https://g.co/kg/m/0140pf"]},"National Rifle Association",{"@type":"Organization","name":"National Rifle Association","sameAs":["https://en.wikipedia.org/wiki/National_Rifle_Association","https://www.wikidata.org/wiki/Q863259","https://g.co/kg/m/0j6f9"]},"CompTIA",{"@type":"Organization","name":"CompTIA","sameAs":["https://en.wikipedia.org/wiki/CompTIA","https://www.wikidata.org/wiki/Q597534","https://g.co/kg/m/040shq"]},"ISFCE LLC",{"@type":"Organization","name":"ISFCE LLC","sameAs":["https://isfce.com","https://g.co/kg/g/11wxm5r0rg"]}],"hasCredential":[{"@type":"EducationalOccupationalCredential","name":"Joomla 3 Certified Administrator","credentialCategory":"Certification","description":"Administrator Exam is the first available Joomla! certification exam","recognizedBy":{"@type":"Organization","name":"Open Source Matters, Inc.","sameAs":["https://en.wikipedia.org/wiki/Open_Source_Matters,_Inc.","https://g.co/kg/g/11f00wvjhz"]},"url":"https://certification.joomla.org/certified-user-directory/michael-richey","about":["Content management system",{"@type":"Thing","name":"Content management system","sameAs":["https://en.wikipedia.org/wiki/Content_management_system","https://www.wikidata.org/wiki/Q131093","https://g.co/kg/m/0k23c"]},"Web content management system",{"@type":"Thing","name":"Web content management system","sameAs":["https://en.wikipedia.org/wiki/Web_content_management_system","https://www.wikidata.org/wiki/Q45211","https://g.co/kg/m/0615s2"]},"Joomla",{"@type":"Thing","name":"Joomla","sameAs":["https://en.wikipedia.org/wiki/Joomla","https://www.wikidata.org/wiki/Q13167","https://g.co/kg/m/07qb81"]}],"educationalLevel":"expert","image":{"@type":"ImageObject","url":"https://www.richeyweb.com/images/contact/badge.webp","contentUrl":"https://www.richeyweb.com/images/contact/badge.webp","width":{"@type":"QuantitativeValue","value":300,"unitCode":"PX"},"height":{"@type":"QuantitativeValue","value":86,"unitCode":"PX"},"caption":"Joomla 3 Certified Administrator"}},{"@type":"EducationalOccupationalCredential","name":"Certified Computer Examiner","credentialCategory":"Certification","description":"Internationally recognized computer forensics certifiecation","recognizedBy":{"@type":"Organization","name":"ISFCE LLC","sameAs":["https://en.wikipedia.org/wiki/ISFCE_LLC","https://g.co/kg/g/11wxm5r0rg"]},"url":"https://isfce.com/","about":["Digital forensics",{"@type":"Thing","name":"Digital forensics","sameAs":["https://en.wikipedia.org/wiki/Digital_forensics","https://www.wikidata.org/wiki/Q3246940","https://g.co/kg/m/0cnxzfx"]},"Computer forensics",{"@type":"Thing","name":"Computer forensics","sameAs":["https://en.wikipedia.org/wiki/Computer_forensics","https://www.wikidata.org/wiki/Q878553","https://g.co/kg/m/02wxbd"]},"Mobile device forensics",{"@type":"Thing","name":"Mobile device forensics","sameAs":["https://en.wikipedia.org/wiki/Mobile_device_forensics","https://www.wikidata.org/wiki/Q6887097","https://g.co/kg/m/06zp3tp"]},"Network forensics",{"@type":"Thing","name":"Network forensics","sameAs":["https://en.wikipedia.org/wiki/Network_forensics","https://www.wikidata.org/wiki/Q7001032","https://g.co/kg/m/05pb280"]},"Database forensics",{"@type":"Thing","name":"Database forensics","sameAs":["https://en.wikipedia.org/wiki/Database_forensics","https://www.wikidata.org/wiki/Q5227405","https://g.co/kg/m/0cgqsy"]}],"educationalLevel":"expert","image":{"@type":"ImageObject","url":"https://www.richeyweb.com/images/contact/isfce-cce.webp","contentUrl":"https://www.richeyweb.com/images/contact/isfce-cce.webp","width":{"@type":"QuantitativeValue","value":150,"unitCode":"PX"},"height":{"@type":"QuantitativeValue","value":150,"unitCode":"PX"},"caption":"Certified Computer Examiner"}}],"hasOfferCatalog":{"@type":"OfferCatalog","name":"Web Services","itemListElement":[{"@type":"Offer","itemOffered":{"@type":"Service","name":"Hosting"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Development"}},{"@type":"Offer","itemOffered":{"@type":"Service","name":"Search Engine Optimization"}}]}},{"@type":"WebSite","@id":"https://www.richeyweb.com/#website","url":"https://www.richeyweb.com/","name":"RicheyWeb","publisher":{"@id":"https://www.richeyweb.com/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://www.richeyweb.com/search?q={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string","valueMaxLength":256,"valueMinLength":2,"valuePattern":"^[A-Za-z0-9\\s]+$"}},"creator":{"@id":"https://www.richeyweb.com/#organization"},"copyrightHolder":{"@id":"https://www.richeyweb.com/#organization"}},{"@type":"WebPage","@id":"https://www.richeyweb.com/software/examples/nicepanel/adding-tab-icons-to-nicepanel-tabs#webpage","url":"https://www.richeyweb.com/software/examples/nicepanel/adding-tab-icons-to-nicepanel-tabs","name":"Adding Tab Icons to NicePanel Tabs","description":"Example for System - NicePanel: tab icon","isPartOf":{"@id":"https://www.richeyweb.com/#website"},"about":{"@id":"https://www.richeyweb.com/#organization"},"inLanguage":"en-GB"},{"@type":"Article","headline":"Adding Tab Icons to NicePanel Tabs","description":"Example for System - NicePanel: tab icon","author":{"@type":"Person","name":"Michael Richey","url":"https://www.richeyweb.com/contact-us","@id":"https://www.richeyweb.com/contact-us#person"},"datePublished":"2025-03-20T00:00:00+00:00","dateModified":"2025-11-25T00:00:00+00:00","about":["Font Awesome",{"@type":"Thing","name":"Font Awesome","sameAs":["https://en.wikipedia.org/wiki/Font_Awesome","https://www.wikidata.org/wiki/Q19571791","https://g.co/kg/m/012pqk27"]},"System - NicePanel",{"@type":"Thing","@id":"https://www.richeyweb.com/software/joomla/plugins/system-nicepanel#softwareapplication","name":"System - NicePanel","sameAs":["https://extensions.joomla.org/extension/style-a-design/modules-panel/nicepanel/","https://en.wikipedia.org/wiki/System_-_NicePanel"]},"Joomla",{"@type":"Thing","name":"Joomla","sameAs":["https://en.wikipedia.org/wiki/Joomla","https://www.wikidata.org/wiki/Q13167","https://g.co/kg/m/07qb81"]},"Technical documentation",{"@type":"Thing","name":"Technical documentation","sameAs":["https://en.wikipedia.org/wiki/Technical_documentation","https://www.wikidata.org/wiki/Q1413406","https://g.co/kg/m/0521g6n"]},"User interface",{"@type":"Thing","name":"User interface","sameAs":["https://en.wikipedia.org/wiki/User_interface","https://www.wikidata.org/wiki/Q47146","https://g.co/kg/m/0c9lk"]},"User interface design",{"@type":"Thing","name":"User interface design","sameAs":["https://en.wikipedia.org/wiki/User_interface_design","https://www.wikidata.org/wiki/Q135707","https://g.co/kg/m/06_275"]}],"mentions":["CSS",{"@type":"Thing","name":"CSS","sameAs":["https://en.wikipedia.org/wiki/CSS","https://www.wikidata.org/wiki/Q46441","https://g.co/kg/m/015tjh"]},"HTML",{"@type":"Thing","name":"HTML","sameAs":["https://en.wikipedia.org/wiki/HTML","https://www.wikidata.org/wiki/Q8811","https://g.co/kg/m/03g20"]},"Responsive web design",{"@type":"Product","name":"Responsive web design","sameAs":["https://en.wikipedia.org/wiki/Responsive_web_design","https://www.wikidata.org/wiki/Q420295","https://g.co/kg/m/0h_98b8"]},"Web design",{"@type":"Thing","name":"Web design","sameAs":["https://en.wikipedia.org/wiki/Web_design","https://www.wikidata.org/wiki/Q190637","https://g.co/kg/m/086df"]}],"@id":"https://www.richeyweb.com/software/examples/nicepanel/adding-tab-icons-to-nicepanel-tabs#article","isPartOf":{"@id":"https://www.richeyweb.com/software/examples/nicepanel/adding-tab-icons-to-nicepanel-tabs#webpage"},"publisher":{"@id":"https://www.richeyweb.com/#organization"},"keywords":"nicepanel examples","articleSection":"NicePanel","url":"https://www.richeyweb.com/software/examples/nicepanel/adding-tab-icons-to-nicepanel-tabs","hasPart":[{"@id":"https://www.richeyweb.com/software/examples/nicepanel/adding-tab-icons-to-nicepanel-tabs#articleindex-toc-the-tab-id_2_1"},{"@id":"https://www.richeyweb.com/software/examples/nicepanel/adding-tab-icons-to-nicepanel-tabs#articleindex-toc-fontawesome-com-v5-search_2_2"},{"@id":"https://www.richeyweb.com/software/examples/nicepanel/adding-tab-icons-to-nicepanel-tabs#articleindex-toc-putting-it-together_2_3"},{"@id":"https://www.richeyweb.com/software/examples/nicepanel/adding-tab-icons-to-nicepanel-tabs#articleindex-toc-adding-lots-of-tab-icons_2_4"}]},{"@id":"https://www.richeyweb.com/software/examples/nicepanel/adding-tab-icons-to-nicepanel-tabs#articleindex","@type":"ItemList","name":"Adding Tab Icons to NicePanel Tabs","numberOfItems":4,"itemListElement":[{"@type":"ListItem","position":1,"item":{"@type":"WPHeader","@id":"https://www.richeyweb.com/software/examples/nicepanel/adding-tab-icons-to-nicepanel-tabs#articleindex-toc-the-tab-id_2_1","name":"The Tab ID","url":"https://www.richeyweb.com/software/examples/nicepanel/adding-tab-icons-to-nicepanel-tabs#toc-the-tab-id_2_1"}},{"@type":"ListItem","position":2,"item":{"@type":"WPHeader","@id":"https://www.richeyweb.com/software/examples/nicepanel/adding-tab-icons-to-nicepanel-tabs#articleindex-toc-fontawesome-com-v5-search_2_2","name":"fontawesome.com/v5/search","url":"https://www.richeyweb.com/software/examples/nicepanel/adding-tab-icons-to-nicepanel-tabs#toc-fontawesome-com-v5-search_2_2"}},{"@type":"ListItem","position":3,"item":{"@type":"WPHeader","@id":"https://www.richeyweb.com/software/examples/nicepanel/adding-tab-icons-to-nicepanel-tabs#articleindex-toc-putting-it-together_2_3","name":"Putting It Together","url":"https://www.richeyweb.com/software/examples/nicepanel/adding-tab-icons-to-nicepanel-tabs#toc-putting-it-together_2_3"}},{"@type":"ListItem","position":4,"item":{"@type":"WPHeader","@id":"https://www.richeyweb.com/software/examples/nicepanel/adding-tab-icons-to-nicepanel-tabs#articleindex-toc-adding-lots-of-tab-icons_2_4","name":"Adding Lots of Tab Icons","url":"https://www.richeyweb.com/software/examples/nicepanel/adding-tab-icons-to-nicepanel-tabs#toc-adding-lots-of-tab-icons_2_4"}}]}]}
```