Home-Icon statt Text in der Navigation anzeigen

Home-Icon statt Text in der Navigation anzeigen


Nachfolgend eine Lösung, in der Navigation statt dem Text ein Home-Icon anzuzeigen.
  1. Verschiebe die speziale Seite "Startseite" in die Linkgruppe "megamenu".
  2. Vergebe die Sortierung "1".
  3. Öffne den Theme Editor mit dem Theme "MyClear".
  4. Wähle die Datei "custom.scss" aus und füge nun folgende Anweisung ein.
  1. .nav-item {
  2.     &.order-lg-1 {
  3.         .nav-link {
  4.             span {
  5.                 display: none;
  6.             }
  7.             &::before {
  8.               content: "\f015";
  9.               font-family: 'Font Awesome 5 Free';
  10.               font-weight: 900;
  11.               line-height: 1;
  12.             }
  13.         }
  14.     }
  15. }

Sollte der Text "Home" oder "Startseite" nach Theme-Kompilierung sichtbar sein, bitte durch diesen ersetzen:
  1. header {
  2.     .navbar-nav {
  3.         > .nav-item.order-lg-1 {
  4.             > .nav-link {
  5.                 font-size: 0px;
  6.                 &::before {
  7.                   content: "\f015";
  8.                   font-family: 'Font Awesome 5 Free';
  9.                   font-weight: 900;
  10.                   line-height: 1.5;
  11.                   font-size: $font-size-base;
  12.                 }
  13.             }
  14.         }
  15.     }
  16. }

Speichere nun die Datei, den Button steht unten.
Anschliessend klicke oben rechts auf den Button "Theme kompilieren".