XF2.x Font Awesome Icons in Navbar

[McAtze]

McAtze hat eine neue Ressource erstellt:

Font Awesome Icons in Navbar - Mit der Ressource kann die Navbar mit FA Icons verschönert werden.

Da sich der ein oder andere u.a. bei xenforo.com versucht hatte die FontAwesome Icons in die Nav-/Subnavbar zu integrieren habe ich dies einmal mit dem korrekten XF2.1 Syntax zusammengestellt.

Bei Bedarf kann ich dies auch gerne später...

Weitere Informationen zu dieser Ressource...

 

[McAtze]

McAtze aktualisierte Font Awesome Icons in Navbar mit einem neuen Eintrag:

Code verfeinert..

- 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

Weitere Informationen zur Aktualisierung...

 

[otto]

Ist eine Option geplant um bei einzelnen oder allen Tabs den Text zu gunsten der Icons weg zu lassen? Home z.B.? Nur so ne Idee...

 

[McAtze]

Wahrscheinlich willst dann auch noch per Tooltip wissen was früher im Tab stand..

 

[otto]

Nö, zumindest beim Home Icon kannst das weglassen.

 

[McAtze]

Und das ohne Eingriff ins Template

 

[Paridus]

Muss das irgendwo aktiviert werden?
ich habe gerade das hier versucht, aber es wird nichts angezeigt.

XF2.1 - Font Awesome Icons in Navbar

 

[McAtze]

Im ACP mal die Fehlermeldungen angeschaut?

 

[Paridus]

Da steht:

    Less_Exception_Compiler: variable @fa-var-question-square is undefined in file anonymous-file-417.less in anonymous-file-417.less src/vendor/oyejorge/less.php/lib/Less/Tree/Variable.php:49

    Generiert von: Unbekanntes Konto 17.01.2019 um 19:17

Stack-Trace

#0 src/vendor/oyejorge/less.php/lib/Less/Tree/Expression.php(52): Less_Tree_Variable->compile(Object(Less_Environment))
#1 src/vendor/oyejorge/less.php/lib/Less/Tree/Mixin/Call.php(43): Less_Tree_Expression->compile(Object(Less_Environment))
#2 src/vendor/oyejorge/less.php/lib/Less/Tree/Ruleset.php(147): Less_Tree_Mixin_Call->compile(Object(Less_Environment))
#3 src/vendor/oyejorge/less.php/lib/Less/Tree/Ruleset.php(88): Less_Tree_Ruleset->EvalMixinCalls(Object(Less_Tree_Ruleset), Object(Less_Environment), 9)
#4 src/vendor/oyejorge/less.php/lib/Less/Tree/Ruleset.php(94): Less_Tree_Ruleset->compile(Object(Less_Environment))
#5 src/vendor/oyejorge/less.php/lib/Less/Tree/Ruleset.php(94): Less_Tree_Ruleset->compile(Object(Less_Environment))
#6 src/vendor/oyejorge/less.php/lib/Less/Parser.php(199): Less_Tree_Ruleset->compile(Object(Less_Environment))
#7 src/XF/CssRenderer.php(363): Less_Parser->getCss()
#8 src/XF/CssRenderer.php(311): XF\CssRenderer->renderToCss('public:extra.le...', '/* XenForo 2.1....')
#9 src/XF/CssRenderer.php(235): XF\CssRenderer->renderTemplate('public:extra.le...', NULL)
#10 src/XF/CssRenderer.php(101): XF\CssRenderer->renderTemplates(Array, Array, Array)
#11 src/XF/CssWriter.php(53): XF\CssRenderer->render(Array)
#12 css.php(30): XF\CssWriter->run(Array, 1, 10, 'd980866b45526e8...')
#13 {main}

 

[McAtze]

Welches XenForo nutzt du denn mit diesem Code?

Bei mir funktioniert es ohne Probleme..

 

[Paridus]

v2.0.12

 

[McAtze]

Dies ist aber für XF2.1+ da hat sich einiges bzgl. FontAwesome geändert. Schau mal hier: Unmaintained - xenForo 2.x.x Navtab menu FontAwesome use of

 

[Paridus]

Okay, danke!

 

[Paridus]

Wie kann ich das Chatsymbol und ein Spendensymbol anzeigen lassen?

 

[Tealk]

Das kann man pauschal nicht sagen, das müsste man auf deiner Seite anschauen wie die Navigationselemente heißt.

 

[Paridus]

Ich habe es selber hinbekommen.

 

[McAtze]

McAtze aktualisierte Font Awesome Icons in Navbar mit einem neuen Updateeintrag:

Erweiterung der Extra.less für weitere FA Icons

Hier der Teil zum Navigationsmenü und dem Benutzermenü.

Anhang anzeigen 12044

Anhang anzeigen 12043

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

Lese den Rest der Aktualisierung...

 

[McAtze]

McAtze aktualisierte Font Awesome Icons in Navbar mit einem neuen Updateeintrag:

Icons für Widgets

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.

Anhang anzeigen 12045

Anhang anzeigen 12046

.p-body-sidebar
{
    [data-widget-key="forum_overview_members_online"] .block-minorHeader:before {
        .m-faBase();
        .m-faContent(@fa-var-users)...

Lese den Rest der Aktualisierung...

 

[unmöglichfirmen]

Hallo @McAtze

Ich wollte fragen ob du es für xen 2.3 eventuell anpassen könntest.

 

[McAtze]

Hallo @McAtze

Ich wollte fragen ob du es für xen 2.3 eventuell anpassen könntest.

Gucke ich mir an..