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
It's from this resource thread.If anyone knows the link to the original post, please add it.
/* 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;
}
same here !Ι 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?
We use essential cookies to make this site work, and optional cookies to enhance your experience.