XF 2.1 Navigation row text replace with an icon?Or no?

mAthosalas

Member
Hi,'m just wondering If I can replace a tab on the navigation raw with an icon.Eg Where it says "Media" ,d like to put a flag or some icon...Is that possible or no?How can I do that?...Thanks
 

djbaxter

Well-known member
You can do it with Font Awesome... just need to add some CSS to the extra.less template.

I can't recall who posted this originally here in the Xenforo forums but here's the gist:

Code:
/* add font awesome icons to nav menu items */
.p-navEl a:before,
.menu-content a:before{
    font-family: 'Font Awesome 5 Pro';
    padding-right: 5px;
}

.p-navE1 a[data-nav-id="whatsNewPosts"]:before{content:"\f067"; }
.p-navE1 a[data-nav-id="recent_posts"]:before{content:"\f067"; }
.p-navEl a[data-nav-id="home"]:before {content:"\f015";}
.p-navEl a[data-nav-id="forums"]:before{content:"\f27a";}
    .menu-content a[data-nav-id="newPosts"]:before{content:"\f067"; }
    .menu-content a[data-nav-id="findThreads"]:before{content:"\f002"; }
    .menu-content a[data-nav-id="yourThreads"]:before{content:"\f498"; }
    .menu-content a[data-nav-id="contributedThreads"]:before{content:"\f5d2"; }
    .menu-content a[data-nav-id="unansweredThreads"]:before{content:"\f05e"; }
    .menu-content a[data-nav-id="watched"]:before{content:"\f1e5"; }
    .menu-content a[data-nav-id="watchedThreads"]:before{content:"\f5da"; }
    .menu-content a[data-nav-id="watchedForums"]:before{content:"\f5da"; }
    .menu-content a[data-nav-id="searchForums"]:before{content:"\f002"; }
    .menu-content a[data-nav-id="markForumsRead"]:before{content:"\f058"; }
.p-navEl a[data-nav-id="whatsNew"]:before{content:"\f0f3"; }
    .menu-content a[data-nav-id="whatsNewPosts"]:before{content:"\f067"; }
    .menu-content a[data-nav-id="whatsNewProfilePosts"]:before{content:"\f007"; }
    .menu-content a[data-nav-id="whatsNewNewsFeed"]:before{content:"\f1ea"; }
    .menu-content a[data-nav-id="latestActivity"]:before{content:"\f043"; }
    .menu-content a[data-nav-id="xfmgWhatsNewNewMedia"]:before {content:"\f03e"; }
    .menu-content a[data-nav-id="xfmgWhatsNewMediaComments"]:before{content:"\f0e6"; }
    .menu-content a[data-nav-id="xfrmNewResources"]:before{content:"\f019"; }   
.p-navEl a[data-nav-id="members"]:before {content:"\f0c0"; }
    .menu-content a[data-nav-id="currentVisitors"]:before{content:"\f1e5"; }
    .menu-content a[data-nav-id="newProfilePosts"]:before{content:"\f086"; }
    .menu-content a[data-nav-id="searchProfilePosts"]:before{content:"\f002"; }

.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--logIn {
    &:before { font-family: "Font Awesome 5 Pro"; padding-right: 5px; content: "\f023";}}
.p-navgroup-link.p-navgroup-link--textual.p-navgroup-link--register {
    &:before { font-family: "Font Awesome 5 Pro"; padding-right: 5px; content: "\f234";}}
    
.actionBar-action:before { margin-right: 5px;}
.actionBar-action--edit:before {.m-faContent("\f040");}
.actionBar-action--report:before {.m-faContent("\f071");}
.actionBar-action--ip:before {.m-faContent("\f002");}
.actionBar-action--delete:before {.m-faContent("\f00d");}
.actionBar-action--spam:before {.m-faContent("\f024");}
.actionBar-action--warn:before {.m-faContent("\f12a");}
.actionBar-action--history:before {.m-faContent("\f1da");}
    
.p-staffBar-link:before {
    font-family:'Font Awesome 5 Pro';
    content: "\f502";
    padding-right: 10px;   
}

a[href$="/approval-queue/"]:before {
    font-family:'Font Awesome 5 Pro' !important;
    content: "\f05b";
    padding-right: 10px !important;   
}

a[href$="/reports/"]:before {
    font-family:'Font Awesome 5 Pro' !important;
    content: "\f648";
    padding-right: 10px !important;   
}

If anyone knows the link to the original post, please add it.
 

Brogan

XenForo moderator
Staff member
If anyone knows the link to the original post, please add it.
It's from this resource thread.

 

mAthosalas

Member
Ι think its ok now as you suggested, but no..it's not what I need.I see now its giving the icon beside the text but I'd like to remove the text and see only the icon!is that possible?
 
Top