tab icon

Currently reading:
tab icon

maszd

cXF Pack C
cXF Pack B
cXF Donor
May 20, 2015
119
46
Hi @BassMan
i was configure my tab with an icon but i dont need some tab icon have an icon like forum and member tab, this is my config:
2017-08-18_190425.png

i see here at cXF 2 style can do this
Capture.PNG
can you share your config? or is need some extra addon?
thank you.
 

maszd

cXF Pack C
cXF Pack B
cXF Donor
May 20, 2015
119
46
here is result from my config :
i need just activity, tags and upgrade have an icon, not forums and member tabs
ff.PNG
 

BassMan

Staff member
Administrator
May 18, 2015
1,144
710
www.customizexf.com
Oh, understand now. I have customized it for this site, yes.

Disable FA icons for NavTabs in style properties and add this to your EXTRA.css:

Code:
/* START - Font Awesome navTab1 (Activity) Icon */
.navTabs .navTab.navTab1 .navLink:before {
    display: block !important;
    font-family: FontAwesome;
    position: absolute;
    top: 0 px;
    left: 11px;
    border-left: none;
    content: "\f0e7";   
    font-size: 12px;
    font-weight: normal;
}
.navTabs .navTab.navTab1.selected .navLink:before {
    top: 1px;
}
.navTabs .navTab.navTab1:hover .navLink:before {
}
.navTabs .navTab.navTab1 .navLink {
    padding-left: 28px;
}
/* END - Font Awesome navTab1 (Activity) Icons */

/* START - Font Awesome navTab2 (Tags) Icon */
.navTabs .navTab.navTab2 .navLink:before {
    display: block !important;
    font-family: FontAwesome;
    position: absolute;
    top: 0 px;
    left: 11px;
    border-left: none;
    content: "\f02b";   
    font-size: 12px;
    font-weight: normal;
}
.navTabs .navTab.navTab2.selected .navLink:before {
    top: 1px;
}
.navTabs .navTab.navTab2:hover .navLink:before {
}
.navTabs .navTab.navTab2 .navLink {
    padding-left: 28px;
}
/* END - Font Awesome navTab2 (Tags) Icons */

/* START - Font Awesome navTab3 (Upgrades) Icon */
.navTabs .navTab.navTab3 .navLink:before {
    display: block !important;
    font-family: FontAwesome;
    position: absolute;
    top: 0 px;
    left: 11px;
    border-left: none;
    content: "\f135";   
    font-size: 12px;
    font-weight: normal;
}
.navTabs .navTab.navTab3.selected .navLink:before {
    top: 1px;
}
.navTabs .navTab.navTab3:hover .navLink:before {
}
.navTabs .navTab.navTab3 .navLink {
    padding-left: 28px;
}
/* END - Font Awesome navTab3 (Upgrades) Icons */
 

maszd

cXF Pack C
cXF Pack B
cXF Donor
May 20, 2015
119
46
Thank you! working perfect! :)
cv.PNG

i hope you add more extra tab, default is only 3 custom tab, cause i have 6 custom tab :D
 

BassMan

Staff member
Administrator
May 18, 2015
1,144
710
www.customizexf.com
Yes, if you change the id for css. For example change navTab3 to navTab4 in your new code in template and change it to navTab4 also in extra css.
 

maszd

cXF Pack C
cXF Pack B
cXF Donor
May 20, 2015
119
46
hmm...iam make a custom template addon like this:
View attachment 991

i dont know how to find ID for css for it.
this is the code :
Code:
<li class="navTab PopupClosed"><a href="https://forums.com/help/" class="navLink">Help</a></li>
$0
 
Last edited:

Create an account or login to comment

You must be a member in order to leave a comment

Create account

Create an account on our community. It's easy!

Log in

Already have an account? Log in here.

Top