XF2.3 Font Awesome Icons in Navbar

Größtenteils funktioniert der Code auch mit XF2.3. Einzig beim Profil müssen Anpassungen gemacht werden, da es früher /account und nun /profil heißt.

Less:

/* Your Profile */
    &[data-nav-id='defaultYourProfile']:before {.m-faContent(@fa-var-user-circle);}
    &[data-nav-id='defaultYourAccount']:before {.m-faContent(@fa-var-cogs);}

    &[href*="/whats-new/news-feed"]:before {.m-faContent(@fa-var-newspaper);}
    &[href*="/search/member?"]:before {.m-faContent(@fa-var-comments);}
    &[href*="/profil/reactions"]:before {.m-faContent(@fa-var-thumbs-up);}
    &[href*="/profil/alerts"]:before {.m-faContent(@fa-var-bell);}
    &[href*="/profil/account-details"]:before {.m-faContent(@fa-var-cogs);}
    &[href*="/profil/security"]:before {.m-faContent(@fa-var-lock);}
    &[href*="/profil/privacy"]:before {.m-faContent(@fa-var-eye);}
    &[href*="/profil/preferences"]:before {.m-faContent(@fa-var-cog);}
    &[href*="/profil/signature"]:before {.m-faContent(@fa-var-pencil);}
    &[href*="/profil/upgrades"]:before {.m-faContent(@fa-var-star);}
    &[href*="/profil/connected-accounts"]:before {.m-faContent(@fa-var-cloud);}
    &[href*="/profil/following"]:before {.m-faContent(@fa-var-user-plus);}
    &[href*="/profil/ignored"]:before {.m-faContent(@fa-var-user-minus);}
    &[href*="/profil/xenforo-license"]:before {.m-faContent(@fa-var-star);}
    &[href*="/logout"]:before {.m-faContent(@fa-var-power-off);}

Komplette Codesatz für die extra.less

Less:

/*** Start FontAwesome Icons in NavTab & AccountMenu ***/
.p-navEl-link,
.menu-linkRow,
.offCanvasMenu a
{                             
    &:before
    {
        .m-faBase();
        //.m-faContent(@fa-var-question-square);
        margin-right:5px;
        display:inline-block;
        text-align:center;
    }             
    
    &[data-nav-id='home']:before {.m-faContent(@fa-var-home);}
    &[data-nav-id='forums']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='whatsNew']:before {.m-faContent(@fa-var-question);}
    &[data-nav-id='members']:before {.m-faContent(@fa-var-users);}
    &[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='yourThreads']:before {.m-faContent(@fa-var-user);}
    &[data-nav-id='contributedThreads']:before {.m-faContent(@fa-var-comments-alt);}
    &[data-nav-id='unansweredThreads']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='watched']:before {.m-faContent(@fa-var-eye);}
    &[data-nav-id='watchedThreads']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='watchedForums']:before {.m-faContent(@fa-var-comments-alt);}
    &[data-nav-id='searchForums']:before {.m-faContent(@fa-var-search);}
    &[data-nav-id='markForumsRead']:before {.m-faContent(@fa-var-eye-slash);}
    &[data-nav-id='help']:before {.m-faContent(@fa-var-info);}
    
    /* 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='xfmgYourMedia']:before {.m-faContent(@fa-var-images);}
    &[data-nav-id='xfmgYourAlbums']:before {.m-faContent(@fa-var-th);}
    &[data-nav-id='xfmgWatchedContent']:before {.m-faContent(@fa-var-eye);}
    &[data-nav-id='xfmgWatchedMedia']:before {.m-faContent(@fa-var-images);}
    &[data-nav-id='xfmgWatchedAlbums']:before {.m-faContent(@fa-var-th);}
    &[data-nav-id='xfmgWatchedCategories']:before {.m-faContent(@fa-var-th-list);}
    &[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='xfrmWatchedResources']:before {.m-faContent(@fa-var-download);}
    &[data-nav-id='xfrmWatchedCategories']:before {.m-faContent(@fa-var-th-large);}
    &[data-nav-id='xfrmSearchResources']:before {.m-faContent(@fa-var-search);}

    /* Members Subnav */
    &[data-nav-id='registeredMembers']:before {.m-faContent(@fa-var-user-circle);}
    &[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);}
    &[data-nav-id='defaultNewsFeed']:before {.m-faContent(@fa-var-star);}
    &[data-nav-id='defaultLatestActivity']:before {.m-faContent(@fa-var-trophy);}
    
    /* Your Profile */
    &[data-nav-id='defaultYourProfile']:before {.m-faContent(@fa-var-user-circle);}
    &[data-nav-id='defaultYourAccount']:before {.m-faContent(@fa-var-cogs);}

    &[href*="/whats-new/news-feed"]:before {.m-faContent(@fa-var-newspaper);}
    &[href*="/search/member?"]:before {.m-faContent(@fa-var-comments);}
    &[href*="/profil/reactions"]:before {.m-faContent(@fa-var-thumbs-up);}
    &[href*="/profil/alerts"]:before {.m-faContent(@fa-var-bell);}
    &[href*="/profil/account-details"]:before {.m-faContent(@fa-var-cogs);}
    &[href*="/profil/security"]:before {.m-faContent(@fa-var-lock);}
    &[href*="/profil/privacy"]:before {.m-faContent(@fa-var-eye);}
    &[href*="/profil/preferences"]:before {.m-faContent(@fa-var-cog);}
    &[href*="/profil/signature"]:before {.m-faContent(@fa-var-pencil);}
    &[href*="/profil/upgrades"]:before {.m-faContent(@fa-var-star);}
    &[href*="/profil/connected-accounts"]:before {.m-faContent(@fa-var-cloud);}
    &[href*="/profil/following"]:before {.m-faContent(@fa-var-user-plus);}
    &[href*="/profil/ignored"]:before {.m-faContent(@fa-var-user-minus);}
    &[href*="/profil/xenforo-license"]:before {.m-faContent(@fa-var-star);}
    &[href*="/logout"]:before {.m-faContent(@fa-var-power-off);}
}
/*** End FontAwesome Icons in NavTab & AccountMenu ***/

Bonus #1

Less:

/*** Icons for Login and Register buttons ***/
.p-navgroup-link
{
    &:before
    {
        .m-faBase();
        margin-right:5px;
        display:inline-block;
        text-align:center;
    }
    
    &--logIn:before {.m-faContent(@fa-var-sign-in);}
    &--register:before {.m-faContent(@fa-var-key);}
}

Wer gerne ein FA Icon für die Widgets in der Sidebar haben möchte, kann gerne diesen Schnipsel verwenden.
Hierfür wird der Widget-Key benötigt der beim erstellen des Widgets angegeben wurde. Als Beispiel hier mal das Statistik-Widget.

Less:

.p-body-sidebar
{
    [data-widget-key="forum_overview_members_online"] .block-minorHeader:before {
        .m-faBase();
        .m-faContent(@fa-var-users);
        display: inline-block;
        margin-right: 5px;
    }
    [data-widget-key="forum_overview_forum_statistics"] .block-minorHeader:before {
        .m-faBase();
        .m-faContent(@fa-var-chart-line);
        display: inline-block;
        margin-right: 5px;
    }
    [data-widget-key="forum_overview_new_posts"] .block-minorHeader:before {
        .m-faBase();
        .m-faContent(@fa-var-comments);
        display: inline-block;
        margin-right: 5px;
    }
    [data-widget-key="xfrm_forum_overview_new_resources"] .block-minorHeader:before {
        .m-faBase();
        .m-faContent(@fa-var-download);
        display: inline-block;
        margin-right: 5px;
    }
    [data-widget-key="forum_overview_share_page"] .block-minorHeader:before {
        .m-faBase();
        .m-faContent(@fa-var-share);
        display: inline-block;
        margin-right: 5px;
    }
}

Hier der Teil zum Navigationsmenü und dem Benutzermenü.

Less:

/*** FontAwesome Icons in NavTab & AccountMenu ***/
.p-navEl-link,
.menu-linkRow,
.offCanvasMenu a
{                             
    &:before
    {
        .m-faBase();
        //.m-faContent(@fa-var-question-square);
        margin-right:5px;
        display:inline-block;
        text-align:center;
    }             
    
    // Navigationstabs
    &[data-nav-id='home']:before {.m-faContent(@fa-var-home);}
    &[data-nav-id='forums']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='whatsNew']:before {.m-faContent(@fa-var-question);}
    &[data-nav-id='members']:before {.m-faContent(@fa-var-users);}
    &[data-nav-id='xfrm']:before {.m-faContent(@fa-var-download);}
    &[data-nav-id='xfmg']:before {.m-faContent(@fa-var-camera);}
    &[data-nav-id='xa_pickem']:before {.m-faContent(@fa-var-futbol);}
    
    &[data-nav-id='defaultYourProfile']:before {.m-faContent(@fa-var-user-circle-o);}
    &[data-nav-id='defaultYourAccount']:before {.m-faContent(@fa-var-cogs);}
    
    // Account menu
    &[href*="/whats-new/news-feed"]:before {.m-faContent(@fa-var-newspaper);}
    &[href*="/search/member?"]:before {.m-faContent(@fa-var-comments);}
    &[href*="/account/reactions"]:before {.m-faContent(@fa-var-thumbs-up);}
    &[href*="/account/alerts"]:before {.m-faContent(@fa-var-bell);}
    &[href*="/account/account-details"]:before {.m-faContent(@fa-var-cogs);}
    &[href*="/account/security"]:before {.m-faContent(@fa-var-lock);}
    &[href*="/account/privacy"]:before {.m-faContent(@fa-var-eye);}
    &[href*="/account/preferences"]:before {.m-faContent(@fa-var-cog);}
    &[href*="/account/signature"]:before {.m-faContent(@fa-var-pencil);}
    &[href*="/account/upgrades"]:before {.m-faContent(@fa-var-star);}
    &[href*="/account/connected-accounts"]:before {.m-faContent(@fa-var-cloud);}
    &[href*="/account/following"]:before {.m-faContent(@fa-var-user-plus);}
    &[href*="/account/ignored"]:before {.m-faContent(@fa-var-user-minus);}
    &[href*="/account/xenforo-license"]:before {.m-faContent(@fa-var-star);}
    &[href*="/logout"]:before {.m-faContent(@fa-var-power-off);}
}

Hier gibt es noch einen Teil für die Links unten im Beitrag..

Less:

.actionBar-action {
    &:before {margin-right:5px;}
    &--report:before {.m-faContent(@fa-var-bell);}
    &--edit:before {.m-faContent(@fa-var-pencil);}
    &.actionBar-action--delete:before {.m-faContent(@fa-var-eraser);}
    &.actionBar-action--spam:before {.m-faContent(@fa-var-flag);}
    &.actionBar-action--ip:before {.m-faContent(@fa-var-search);}
    &.actionBar-action--warn:before {.m-faContent(@fa-var-exclamation-triangle);}
    &.actionBar-action--history:before {.m-faContent(@fa-var-history);}
    &.actionBar-action--changeOwnerAndDate:before {.m-faContent(@fa-var-exchange);}
}

- Ich habe den Code ein wenig mehr LESS gemacht.
- Einen Default Icon für nicht aufgeführte Links hinzugefügt.

Diskussion dazu kann man hier verfolgen: Font Awesome Icons in Navbar for 2.1