How To Add A Awesomefont Icon Before A Tab Title?
J
How to add a fontawesome icon before a Tab Title? In SPPB "Navigation" panel "Media" allowes Icon with a position? but how do we asign a icon to each "Content" Tab item?? It does not seem clear in the documentation? https://www.joomshaper.com/documentation/sp-page-builder/tabs
Does it need to be done with custom css with The ::before Pseudo-element?
We also noticed that the tabs have an id with the pound sign # in the id? Strange? example... id="#sppb-content1-1"
Paul Frankowski
Accepted AnswerI have confirmation, it's a bug in addon code, and it will be fixed in next SPPB update.
Thanks for cooperation.
So using extra CSS is not needed if somebody can wait a week for offcial update.
Paul Frankowski
Accepted AnswerHi J,
- Tabs =/= Navigation addon.
- Is possible only by using Custom CSS, but not so easy becuse of "#" in ID section of each tab.
Start from:
ul.sppb-nav.sppb-nav-tabs > li > a::before {
content: "\f1cb";
font-weight: bold;
font-family: "Font Awesome 5 Brands";
}Then consider using CSS :nth-child() Selector to set different 2nd, 3rd icon.
ul.sppb-nav.sppb-nav-tabs > li:nth-child(2) > a::before { ... }
ul.sppb-nav.sppb-nav-tabs > li:nth-child(3) > a::before { ... }Remember that:
- SPPB use Font Awesome 5 Free
- Each Page has Custom CSS area.
- You got basic example code already.
- We don't teach CSS here.
Pavel
Accepted AnswerHi. Is CSS really needed for this? Or did I not understand something?
The same in Navigation addon
Paul Frankowski
Accepted Answerhmm - on my version 5.0.9, I don't have "Icon" field 
I have to ask our developer
Pavel
Accepted AnswerHi Paul. Maybe your have addon's override? :D
Pavel
Accepted AnswerFound. When you use "add new item" button, icon input does not display. But if you duplicate the the first, default item, then there is icon input there. It looks like this is a bug.
