tab icon

maszd

cXF BRONZE
cXF Donor
Messages
112
Likes
43
#1
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 BRONZE
cXF Donor
Messages
112
Likes
43
#4
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
Messages
717
Likes
383
Website
www.customizexf.com
#5
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 BRONZE
cXF Donor
Messages
112
Likes
43
#6
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
 

maszd

cXF BRONZE
cXF Donor
Messages
112
Likes
43
#10
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.

Welcome to customizeXF

We are running default XenForo style customized by cXF
Registration is free!

Search forums

Top