XenForo Adding Icons to the Navbar and Pop-up Menu

wikislo

Registered
Hi friends, I actually wanted to share with you if it was an arrangement I had made for a client. Although I've opened the topic to xenforo 2 template changes, it doesn't include any template changes. We have added the icon by using advanced Css selectors. Just add the following codes to the extra.less template.

CSS:
.p-navEl [data-nav-id="home"]:before {
    font-family: FontAwesome;
    content: "\f015";
    padding-right: 3px;
}

.p-navEl [data-nav-id="forums"]:before {
    font-family: FontAwesome;
    content: "\f27a";
    padding-right: 3px;
}

.p-navEl [data-nav-id="whatsNew"]:before {
    font-family: FontAwesome;
    content: "\f29c";
    padding-right: 3px;
}

.p-navEl [data-nav-id="members"]:before {
    font-family: FontAwesome;
    content: "\f0c0";
    padding-right: 3px;
}

.p-navEl [data-nav-id="newPosts"]:before {
    font-family: FontAwesome;
    content: "\f0e6";
    padding-right: 3px;
}

.p-navEl [data-nav-id="newPosts"]:before {
    font-family: FontAwesome;
    content: "\f0e6";
    padding-right: 3px;
}

.p-navEl [data-nav-id="watched"]:before {
    font-family: FontAwesome;
    content: "\f06e";
    padding-right: 3px;
}

.p-navEl [data-nav-id="findThreads"]:before {
    font-family: FontAwesome;
    content: "\f002";
    padding-right: 3px;
}

.p-navEl [data-nav-id="searchForums"]:before {
    font-family: FontAwesome;
    content: "\f00e";
    padding-right: 3px;
}

.p-navEl [data-nav-id="markForumsRead"]:before {
    font-family: FontAwesome;
    content: "\f00c";
    padding-right: 3px;
}

.menu-content [data-nav-id="whatsNewPosts"]:before{
    font-family: FontAwesome;
    content: "\f0e6";
    padding-right: 3px;
}

.menu-content [data-nav-id="whatsNewProfilePosts"]:before{
    font-family: FontAwesome;
    content: "\f2c0";
    padding-right: 3px;
}

.menu-content [data-nav-id="whatsNewNewsFeed"]:before{
    font-family: FontAwesome;
    content: "\f27b";
    padding-right: 3px;
}

.menu-content [data-nav-id="latestActivity"]:before{
    font-family: FontAwesome;
    content: "\f0e6";
    padding-right: 3px;
}

.menu-content [data-nav-id="currentVisitors"]:before{
    font-family: FontAwesome;
    content: "\f0c0";
    padding-right: 3px;
}

.menu-content [data-nav-id="newProfilePosts"]:before{
    font-family: FontAwesome;
    content: "\f27b";
    padding-right: 3px;
}

.menu-content [data-nav-id="searchProfilePosts"]:before{
    font-family: FontAwesome;
    content: "\f00e";
    padding-right: 3px;
}

.menu-content [data-nav-id="yourThreads"]:before{
    font-family: FontAwesome;
    content: "\f114";
    padding-right: 3px;
}

.menu-content [data-nav-id="contributedThreads"]:before{
    font-family: FontAwesome;
    content: "\f0e6";
    padding-right: 3px;
}

.menu-content [data-nav-id="unansweredThreads"]:before{
    font-family: FontAwesome;
    content: "\f086";
    padding-right: 3px;
}

.menu-content [data-nav-id="watchedThreads"]:before{
    font-family: FontAwesome;
    content: "\f2ce";
    padding-right: 3px;
}

.menu-content [data-nav-id="watchedForums"]:before{
    font-family: FontAwesome;
    content: "\f277";
    padding-right: 3px;
}

.menu-content a[href="{{ link('whats-new/news-feed') }}"]:before{
    font-family: FontAwesome;
    content: "\f09e";
    padding-right: 3px;
}

.menu-content li > a[href*="{{ link('search/member') }}"]:before{
    font-family: FontAwesome;
    content: "\f27b";
    padding-right: 3px;
}

.menu-content li > a[href="{{ link('account/likes') }}"]:before{
    font-family: FontAwesome;
    content: "\f087";
    padding-right: 3px;
}

.menu-content li > a[href="{{ link('account/account-details') }}"]:before{
    font-family: FontAwesome;
    content: "\f2c0";
    padding-right: 3px;
}

.menu-content li > a[href="{{ link('account/preferences') }}"]:before{
    font-family: FontAwesome;
    content: "\f085";
    padding-right: 3px;
}

.menu-content li > a[href="{{ link('account/security') }}"]:before{
    font-family: FontAwesome;
    content: "\f023";
    padding-right: 3px;
}

.menu-content li > a[href="{{ link('account/signature') }}"]:before{
    font-family: FontAwesome;
    content: "\f040";
    padding-right: 3px;
}

.menu-content li > a[href="{{ link('account/privacy') }}"]:before{
    font-family: FontAwesome;
    content: "\f070";
    padding-right: 3px;
}

.menu-content li > a[href="{{ link('account/following') }}"]:before{
    font-family: FontAwesome;
    content: "\f234";
    padding-right: 3px;
}

.menu-content li > a[href="{{ link('account/ignored') }}"]:before{
    font-family: FontAwesome;
    content: "\f235";
    padding-right: 3px;
}

.menu-content > a[href*="{{ link('logout') }}"]:before{
    font-family: FontAwesome;
    content: "\f011";
    padding-right: 3px;
}
 

Quick87

Registered
same prob here friend...
You can use this:
Less:
.p-navEl [data-nav-id='home']::before {
font-family: 'Font Awesome 5 Pro';
content: '\f015';
padding-right: 3px;
}

.p-navEl [data-nav-id='forums']::before {
font-family: 'Font Awesome 5 Pro';
content: '\f27a';
padding-right: 3px;
}

.p-navEl [data-nav-id='whatsNew']::before {
font-family: 'Font Awesome 5 Pro';
content: '\f0e7';
padding-right: 3px;
}
.p-navEl [data-nav-id='members']::before {
    font-family: 'Font Awesome 5 Pro';
    content: '\f0c0';
    padding-right: 3px;
}

.p-navEl [data-nav-id='newPosts']::before {
    font-family: 'Font Awesome 5 Pro';
    content: '\f0e6';
    padding-right: 3px;
}

.p-navEl [data-nav-id='newPosts']::before {
    font-family: 'Font Awesome 5 Pro';
    content: '\f0e6';
    padding-right: 3px;
}

.p-navEl [data-nav-id='watched']::before {
    font-family: 'Font Awesome 5 Pro';
    content: '\f06e';
    padding-right: 3px;
}

.p-navEl [data-nav-id='findThreads']::before {
    font-family: 'Font Awesome 5 Pro';
    content: '\f002';
    padding-right: 3px;
}

.p-navEl [data-nav-id='searchForums']::before {
    font-family: 'Font Awesome 5 Pro';
    content: '\f00e';
    padding-right: 3px;
}

.p-navEl [data-nav-id='markForumsRead']::before {
    font-family: 'Font Awesome 5 Pro';
    content: '\f00c';
    padding-right: 3px;
}

.menu-content [data-nav-id='whatsNewPosts']::before{
    font-family: 'Font Awesome 5 Pro';
    content: '\f0e6';
    padding-right: 3px;
}

.menu-content [data-nav-id='whatsNewProfilePosts']::before{
    font-family: 'Font Awesome 5 Pro';
    content: '\f2c0';
    padding-right: 3px;
}

.menu-content [data-nav-id='whatsNewNewsFeed']::before{
    font-family: 'Font Awesome 5 Pro';
    content: '\f27b';
    padding-right: 3px;
}

.menu-content [data-nav-id='latestActivity']::before{
    font-family: 'Font Awesome 5 Pro';
    content: '\f0e6';
    padding-right: 3px;
}

.menu-content [data-nav-id='currentVisitors']::before{
    font-family: 'Font Awesome 5 Pro';
    content: '\f0c0';
    padding-right: 3px;
}

.menu-content [data-nav-id='newProfilePosts']::before{
    font-family: 'Font Awesome 5 Pro';
    content: '\f27b';
    padding-right: 3px;
}

.menu-content [data-nav-id='searchProfilePosts']::before{
    font-family: 'Font Awesome 5 Pro';
    content: '\f00e';
    padding-right: 3px;
}

.menu-content [data-nav-id='yourThreads']::before{
    font-family: 'Font Awesome 5 Pro';
    content: '\f114';
    padding-right: 3px;
}

.menu-content [data-nav-id='contributedThreads']::before{
    font-family: 'Font Awesome 5 Pro';
    content: '\f0e6';
    padding-right: 3px;
}

.menu-content [data-nav-id='unansweredThreads']::before{
    font-family: 'Font Awesome 5 Pro';
    content: '\f086';
    padding-right: 3px;
}

.menu-content [data-nav-id='watchedThreads']::before{
    font-family: 'Font Awesome 5 Pro';
    content: '\f2ce';
    padding-right: 3px;
}

.menu-content [data-nav-id='watchedForums']::before{
    font-family: 'Font Awesome 5 Pro';
    content: '\f277';
    padding-right: 3px;
}

.menu-content a[href='{{ link('whats-new/news-feed') }}']::before{
    font-family: 'Font Awesome 5 Pro';
    content: '\f09e';
    padding-right: 3px;
}

.menu-content li > a[href*='{{ link('search/member') }}']::before{
    font-family: 'Font Awesome 5 Pro';
    content: '\f27b';
    padding-right: 3px;
}

.menu-content li > a[href='{{ link('account/likes') }}']::before{
    font-family: 'Font Awesome 5 Pro';
    content: '\f087';
    padding-right: 3px;
}

.menu-content li > a[href='{{ link('account/account-details') }}']::before{
    font-family: 'Font Awesome 5 Pro';
    content: '\f2c0';
    padding-right: 3px;
}

.menu-content li > a[href='{{ link('account/preferences') }}']::before{
    font-family: 'Font Awesome 5 Pro';
    content: '\f085';
    padding-right: 3px;
}

.menu-content li > a[href='{{ link('account/security') }}']::before{
    font-family: 'Font Awesome 5 Pro';
    content: '\f023';
    padding-right: 3px;
}

.menu-content li > a[href='{{ link('account/signature') }}']::before{
    font-family: 'Font Awesome 5 Pro';
    content: '\f040';
    padding-right: 3px;
}

.menu-content li > a[href='{{ link('account/privacy') }}']::before{
    font-family: 'Font Awesome 5 Pro';
    content: '\f070';
    padding-right: 3px;
}

.menu-content li > a[href='{{ link('account/following') }}']::before{
    font-family: 'Font Awesome 5 Pro';
    content: '\f234';
    padding-right: 3px;
}

.menu-content li > a[href='{{ link('account/ignored') }}']::before{
    font-family: 'Font Awesome 5 Pro';
    content: '\f235';
    padding-right: 3px;
}

.menu-content [data-nav-id='logout']::before {
font-family: 'Font Awesome 5 Free';
content: '\f011';
padding-right: 3px;
}
 
Back
Top Bottom