[contact-form-7 id="24083" title="Feedback DE"]

Ausgewählte Vorlagen

Joomla 3.x. Wie man ein Bild durch einen Text für Menüelemente ersetzt

Von diesem Tutorial erfahren Sie, wie man ein Bild anstatt eines Textes für Menüelemente in Joomla nutzt.

Joomla 3.x. Wie man ein Bild durch einen Text für Menüelemente ersetzt

Es gibt einige Verfahren zum Hinzufügen des Icons zum Menü:

Wie man Bilder zum Menü hinzufügt, indem man den Menümanager nutzt

Das Standardmodul in Joomla ermöglicht es Ihnen Titel der Menüpunkte durch Bilder zu ersetzen:

  1. Loggen Sie sich ins Joomla Control Panel ein.

  2. Finden Sie den Tab Menüs (Menus) > Hauptmenü (Main Menu).

  3. Danach drücken Sie auf jedes Menüelement, um Änderungen an ihm vorzunehmen:

    Joomla_3.x._How_to_replace_menu_text_with_an_image_1

  4. Ersetzen Sie den Typ des Menüelementes durch einen externen link (External Link).

  5. Finden Sie den Bereich Einstellungen Linktyp (Link type).

  6. Legen Sie den Wert für die Option Titel des Menüpunktes hinzufügen (Add Menu Title) Nein fest.

  7. Nutzen Sie den Button Wählen (Select), um Ihr Bild zu wählen.

  8. Drücken Sie auf den Button Speichern (Save), um die Änderungen zu übernehmen, und überprüfen Sie Ihre Website:

    Joomla_3.x._How_to_replace_menu_text_with_an_image_2

Wie man Bilder hinzufügt, indem man einen CSS Code nutzt

Das zweite Verfahren besteht darin, dass man die CSS Klasse zur Datei templates/theme###/css/templates.css (wo ### – die Nummer Ihrer Vorlage ist) hinzufügt. Einige Menü-Module für Joomla, wie das Modul IceMegaMenu, ermöglichen es Ihnen nicht, ein Bild zum Menüelement im Control Panel hinzuzufügen. Sie können ein Bild hinzufügen, indem Sie einen CSS Code nutzen:

  1. Indem Sie ein Hintergrundbild im CSS Code nutzen:

    1. öffnen Sie Ihre Website im Browser und nutzen Sie das Entwicklerwerkzeug, um eine benutzerdefinierte CSS Klasse zu finden, die Sie zum Menüelement hinzufügen sollen:

    2. Kopieren Sie die CSS Klasse, die Sie finden. Normalerweise sieht der Code so aus:

      #iceMenu_### .iceMenuTitle:before {
        content: url("image_link_here") !important;
        top: 20px !important;
        position: relative !important;
        display: inline-block !important;
        line-height: 45px !important;
        }
        
      #iceMenu_101 .iceMenuTitle {
        font:0/0 a !important;
        }
      

      wo ### – die ID des Menüelementes ist. Sie können die IDs der Menüpunkte im Control Panel finden. Im Tab Menüs (Menus) > Hauptmenü (Main Menu) sehen Sie das Folgende:

      Joomla_3.x._How_to_replace_menu_text_with_an_image_3

      image_link_here – der Link zum Bild des Menüelementes.

    3. Stellen Sie die Verbindung mit dem Server her, indem Sie FTP oder das Hosting Control Panel nutzen.

    4. Finden Sie die Datei templates.css im Ordner templates/theme###/css auf Ihrem Server. Öffnen Sie die Datei in jedem Code-Editor auf Ihrem Computer.

    5. Fügen Sie Ihrebenutzerdefinierte CSS Klasse am Ende der Datei templates.css hinzu.

    6. Speichern Sie die Datei, laden Sie sie auf den Server hoch und überprüfen Sie das Ergebnis auf der Website.

  2. Indem Sie die FontAwesome Icons nutzen:

    1. überprüfen Sie Ihre Website. Nutzen Sie dafür das Entwicklerwerkzeug, um eine benutzerdefinierte CSS Klasse zu finden.

    2. Nehmen Sie die Änderungen an der Datei templates/theme###/css/templates.css (wo ### – die Nummer Ihrer Vorlage ist) vor.

    3. Der CSS Code, den Sie zur Datei hinzufügen sollen, sieht normalerweise so aus:

      #iceMenu_101 .iceMenuTitle:before {
        font-family: FontAwesome !important;
        content: "###" !important;
        font-size: 45px !important;
        top: 20px !important;
        position: relative !important;
        display: inline-block !important;
        line-height: 45px !important;
        height: 90px !important;
        }
        
      #iceMenu_101 .iceMenuTitle {
        font:0/0 a !important;
        }
      

      wo ### – die Klasse des Icons FontAwesome ist. Die Liste der verfügbaren Icons können Sie auf der Website FontAwesome finden.

    4. Vergessen Sie nicht die Datei zu speichern und auf den Server hochzuladen.

    5. Überprüfen Sie die vorgenommenen Änderungen auf der Website.

Sie können jetzt selbst ein Bild durch einen Text für Menüelemente in Joomla ersetzen.

Sie können auch das ausführliche Video-Tutorial nutzen:

Joomla 3.x. Wie man ein Bild durch einen Text für Menüelemente ersetzt