Folge dem Video um zu sehen, wie unsere Website als Web-App auf dem Startbildschirm installiert werden kann.
Anmerkung: Diese Funktion ist in einigen Browsern möglicherweise nicht verfügbar.
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 dieextra.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
Wir verwenden essentielle Cookies, damit diese Website funktioniert, und optionale Cookies, um den Komfort bei der Nutzung zu verbessern.
Siehe weitere Informationen und konfiguriere deine Einstellungen