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
XF 2.1 Navigation row text replace with an icon?Or no?
- Thread starter mAthosalas
- Start date
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:
If anyone knows the link to the original post, please add it.
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.
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
Member
Could You please explain me the procedure?
I found the extra.less,added the code but what next?
I found the extra.less,added the code but what next?
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?
