XF 2.1 FontAwesome in Extra.Less

[Ablac]

This was working prior to the newest update, but after updating, it stopped working, anyone have any ideas?

/* XenForo 2.1.x Navtab menu FontAwesome 5 - Start */
.p-navEl-link
{
    &:before
    {
        .m-faBase();
        .m-faContent(@fa-var-question-square);
        display:inline-block;
        text-align:center;
        margin-right:5px;
    }

    &[data-nav-id='home']:before {.m-faContent(@fa-var-home);}
    &[data-nav-id='forums']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='Admin']:before {.m-faContent(@fa-var-user-shield);}
    &[data-nav-id='members']:before {.m-faContent(@fa-var-users);}
    &[data-nav-id='server']:before {.m-faContent(@fa-var-server);}
    &[data-nav-id='th_donate']:before {.m-faContent(@fa-var-donate);}
    &[data-nav-id='bans']:before {.m-faContent(@fa-var-ban);}
    &[data-nav-id='xfrm']:before {.m-faContent(@fa-var-download);}
    &[data-nav-id='xfmg']:before {.m-faContent(@fa-var-camera);}

    /* Forums Subnav*/
    &[data-nav-id='newPosts']:before {.m-faContent(@fa-var-search-plus);}
    &[data-nav-id='findThreads']:before {.m-faContent(@fa-var-search);}
    &[data-nav-id='searchForums']:before {.m-faContent(@fa-var-search);}
    &[data-nav-id='watched']:before {.m-faContent(@fa-var-eye);}
    &[data-nav-id='markForumsRead']:before {.m-faContent(@fa-var-eye-slash);}
    &[data-nav-id='thIgnoreMore_ignored']:before {.m-faContent(@fa-var-times-circle);}

    /* WhatsNew Subnav */
    &[data-nav-id='whatsNewPosts']:before {.m-faContent(@fa-var-pencil);}
    &[data-nav-id='whatsNewProfilePosts']:before {.m-faContent(@fa-var-rss);}
    &[data-nav-id='whatsNewNewsFeed']:before {.m-faContent(@fa-var-star);}
    &[data-nav-id='xfmgWhatsNewNewMedia']:before {.m-faContent(@fa-var-images);}
    &[data-nav-id='xfmgWhatsNewMediaComments']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='xfrmNewResources']:before {.m-faContent(@fa-var-download);}
    &[data-nav-id='latestActivity']:before {.m-faContent(@fa-var-trophy);}

    /* XFMG Subnav */
    &[data-nav-id='xfmgNewMedia']:before {.m-faContent(@fa-var-images);}
    &[data-nav-id='xfmgNewComments']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='xfmgAddMedia']:before {.m-faContent(@fa-var-plus-square);}
    &[data-nav-id='xfmgYourContent']:before {.m-faContent(@fa-var-user);}
    &[data-nav-id='xfmgWatchedContent']:before {.m-faContent(@fa-var-eye);}
    &[data-nav-id='xfmgSearchMedia']:before {.m-faContent(@fa-var-search);}
    &[data-nav-id='xfmgMarkViewed']:before {.m-faContent(@fa-var-eye-slash);}

    /* XFRM Subnav */
    &[data-nav-id='xfrmLatestReviews']:before {.m-faContent(@fa-var-balance-scale);}
    &[data-nav-id='xfrmYourResources']:before {.m-faContent(@fa-var-user);}
    &[data-nav-id='xfrmWatched']:before {.m-faContent(@fa-var-eye);}
    &[data-nav-id='xfrmSearchResources']:before {.m-faContent(@fa-var-search);}

    /* Members Subnav */
    &[data-nav-id='currentVisitors']:before {.m-faContent(@fa-var-user-plus);}
    &[data-nav-id='newProfilePosts']:before {.m-faContent(@fa-var-pencil);}
    &[data-nav-id='searchProfilePosts']:before {.m-faContent(@fa-var-user-secret);}
    
    /* Profile Subnav */
    &[data-nav-id='defaultNewsFeed']:before {.m-faContent(@fa-var-newspaper);}
    &[data-nav-id='defaultLatestActivity']:before {.m-faContent(@fa-var-pencil);}
    &[data-nav-id='defaultYourProfile']:before {.m-faContent(@fa-var-id-card);}
    &[data-nav-id='defaultYourAccount']:before {.m-faContent(@fa-var-user);}
    &[data-nav-id='defaultLogOut']:before {.m-faContent(@fa-var-sign-out-alt);}
}
/* XenForo 2.1.x Navtab menu FontAwesome 5 - End */

 

[ekempter]

The entire dropdown:

    &[href*='news-feed']:before {.m-faContent(@fa-var-newspaper);}
    &[href*='search']:before {.m-faContent(@fa-var-file-text-o);}
    &[href*='reactions']:before {.m-faContent(@fa-var-thumbs-up);}
    &[href*='security']:before {.m-faContent(@fa-var-lock);}
    &[href*='privacy']:before {.m-faContent(@fa-var-user-secret);}
    &[href*='preferences']:before {.m-faContent(@fa-var-wrench);}
    &[href*='signature']:before {.m-faContent(@fa-var-pencil);}
    &[href*='following']:before {.m-faContent(@fa-var-user-plus);}
    &[href*='ignored']:before {.m-faContent(@fa-var-ban);}
    &[href*='account-details']:before {.m-faContent(@fa-var-user);}
    &[href*='logout']:before {.m-faContent(@fa-var-sign-out-alt);}

 

[Ablac]

NVM i solved it my Style had a navigation setting that got reset that was overriding these.

 

[ekempter]

In 2.2, the data-nav-id does not appear within the profile subnav list links so these lines no longer work:

/* Profile Subnav */
&[data-nav-id='defaultNewsFeed']:before {.m-faContent(@fa-var-newspaper);}
&[data-nav-id='defaultLatestActivity']:before {.m-faContent(@fa-var-pencil);}
&[data-nav-id='defaultYourProfile']:before {.m-faContent(@fa-var-id-card);}
&[data-nav-id='defaultYourAccount']:before {.m-faContent(@fa-var-user);}
&[data-nav-id='defaultLogOut']:before {.m-faContent(@fa-var-sign-out-alt);}

Here is the 2.2 source code for the Newsfeed link. It appears that the CSS needs to be able to read the URL to determine which FA font should display:

<li>
<a href="/community/index.php?whats-new/news-feed" class="menu-linkRow">News feed</a>
</li>

Has anyone resolved this?

 

[ekempter]

I figured it out:

    /* Profile Subnav
    &[data-nav-id='defaultNewsFeed']:before {.m-faContent(@fa-var-newspaper);}
    &[data-nav-id='defaultLatestActivity']:before {.m-faContent(@fa-var-pencil);}
    &[data-nav-id='defaultYourProfile']:before {.m-faContent(@fa-var-id-card);}
    &[data-nav-id='defaultYourAccount']:before {.m-faContent(@fa-var-user);}
    &[data-nav-id='defaultLogOut']:before {.m-faContent(@fa-var-sign-out-alt);} */   
    
    &[href*='news-feed']:before {.m-faContent(@fa-var-newspaper);}
    &[href*='search']:before {.m-faContent(@fa-var-pencil);}
    &[href*='account-details']:before {.m-faContent(@fa-var-user);}
    &[href*='logout']:before {.m-faContent(@fa-var-sign-out-alt);}

 

[ekempter]

I also commented out the following so that style selection had no icons.

/* Removed default icon
.m-faContent(@fa-var-question-square); */

 

[CashOutGang1337]

How can I use Pro Font Awesome Icons with this??

And can i use 6.0 Font Awesome?

 

[Nicolas FR]

How can I use Pro Font Awesome Icons with this??

.m-faBase('Pro');

And can i use 6.0 Font Awesome?

Not yet...

 

[CashOutGang1337]

.m-faBase('Pro');


Not yet...

I appreciate the response bro. Thanks alot

 

[Kirby]

And can i use 6.0 Font Awesome?

Theoretically: Yes. But you would have to buy a license for FA 6 and adjust the CSS / HTML accordingly which might be a lot of work.

 

[CashOutGang1337]

Theoretically: Yes. But you would have to buy a license for FA 6 and adjust the CSS / HTML accordingly which might be a lot of work.

yeah.. i have a subscription... but clueless on how to incorporate to xenoforo