Font Awesome Icons in Navbar

XF2.2 Font Awesome Icons in Navbar

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.

Bildschirmfoto 2024-02-24 um 16.28.14.png


Bildschirmfoto 2024-02-24 um 16.28.52.png


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ü.

2024-02-24_16-21-56.png


2024-02-24_16-21-47.png


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..

2024-02-24_16-21-24.png


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
Zurück
Oben