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

[mAthosalas]

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]

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:

/* 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.

 

[Paul B]

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

It's from this resource thread.

Unmaintained - Font Awesome on Menu and Sub Menus

Add font awesome icons to menu and submenu drop downs. More unicode font awesome codes can be found at Font Awesome Icon List (* Xenforo only Supports Font awesome 4) When you click single icon it will have unicode under the icon shown. You...

xenforo.com

 

[mAthosalas]

Could You please explain me the procedure?
I found the extra.less,added the code but what next?

 

[mAthosalas]

Ι 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?

 

[Nicolas FR]

Ι 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?

same here !

 

[mAthosalas]

any idea?anyone?

 

[Paul B]

Edit the navigation entries and change them from this:



To this:



That will hide the text.


Alternatively, edit the .nav* phrases.

 

[mAthosalas]

ok I'll try