So fügen Sie benutzerdefinierte Symbole in Elementor hinzu: 3 Möglichkeiten

Wichtige Erkenntnisse

• Das Icon Library-Popup von Elementor zeigt standardmäßig nur Font Awesome in Regular-, Solid- und Brands-Sets an, und jedes Widget mit einem Symbolfeld öffnet dasselbe Popup.
• Der schnellste Weg, benutzerdefinierte Symbole in Elementor hinzuzufügen, ist die SVG-Taste Hochladen im Symbolfeld; Wenn die Datei abgelehnt wird, aktivieren Sie Ungefilterte Datei-Uploads unter Elementor > Einstellungen > Erweitert.
• Der Bildschirm Benutzerdefinierte Symbole von Elementor Pro importiert eine ganze Symbolschriftart aus einer Fontello-, IcoMoon- oder Fontastic-Zip-Datei und listet sie unter Meine Bibliotheken im Icon Library-Popup auf.
• Elementor Pro verbindet auch Font Awesome Pro: Fügen Sie Ihre Kit-ID unter Elementor > Einstellungen > Integrationen ein und klicken Sie auf Kit-ID validieren, um die Pro-Stile zum Picker hinzuzufügen.
• Die Master Addons Icon Library-Erweiterung fügt dem gleichen Popup 8 Symbolpakete mit 5.344 Symbolen hinzu, und Federsymbole, Remix-Symbole und Teenyicons in diesem Satz erfordern Master Addons Pro.

Sie können benutzerdefinierte Symbole in Elementor auf drei Arten hinzufügen: Laden Sie eine SVG in ein beliebiges Symbolfeld hoch, importieren Sie Ihre eigene Symbolschrift mit Elementor Pro oder schalten Sie zusätzliche Symbolpakete von Master Addons ein Alle drei landen im selben Icon Library Popup, das nur Font Awesome bietet, bis Sie etwas hinzufügen.

Diese Anleitung geht durch jede Methode mit den genauen Einstellungen zum Klicken, vergleicht sie dann in einer Tabelle, damit Sie die richtige auswählen können. Danach behandelt sie das Styling (Farbe, Größe und Schwebeflug) und die Probleme, die Menschen am häufigsten treffen, wie Symbole, die als leere Quadrate angezeigt werden.

Drei Möglichkeiten, benutzerdefinierte Symbole in Elementor hinzuzufügen

Die Methode, die passt, hängt davon ab, wie viele Symbole Sie benötigen und ob Sie diese bereits als Dateien haben.

• Für ein oder zwei Symbole, wie zum Beispiel eine Logo-Markierung, laden Sie die SVG direkt in das Symbolfeld hoch (Methode 1).
• Für Ihr eigenes Markenset importieren Sie es als Symbolschrift mit den benutzerdefinierten Symbolen von Elementor Pro (Methode 2).
• Für eine große Auswahl an fertigen Symbolen, bei denen es nichts hochzuladen gibt, schalten Sie die Symbolpakete in Master-Addons ein (Methode 3).

Sie können alle drei auf einer Seite mischen Ein hochgeladener SVG, ein Custom Icons Set, Font Awesome und ein Master Addons Pack können alle auf derselben Seite sitzen, denn jedes ist nur eine weitere Quelle für dasselbe Icon-Feld.

Methode 1: Integrierte Symbolbibliothek und SVG-Upload von Elementor

Jedes Elementor-Widget mit einem Symbolfeld öffnet das gleiche Icon Library-Popup, egal ob Icon, Icon Box, Icon List, Button oder Social Icons. Außerhalb des Feldes listet dieses Popup Font Awesome in drei Sätzen auf: Regular, Solid und Brands.

1. Fügen Sie Ihrer Seite ein Symbol-Widget oder ein beliebiges Widget mit einem Symbol hinzu.
2. Fahren Sie im Reiter Inhalt mit der Maus über die Symbolvorschau Es erscheinen zwei Schaltflächen: Symbolbibliothek und Hochladen von SVG.
3. Klicken Sie auf Symbolbibliothek, um ein Font Awesome-Symbol auszuwählen, oder laden Sie SVG hoch, um Ihre eigene Datei zu verwenden.

Hochladen SVG ist die schnellste Möglichkeit, ein einzelnes benutzerdefiniertes Symbol hinzuzufügen, wie die Logo-Markierung eines Clients WordPress blockiert standardmäßig SVG-Uploads. Wenn Elementor die Datei also ablehnt, aktivieren Sie Ungefilterte Datei-Uploads unter Elementor > Einstellungen > Erweitert. Tun Sie das nur, wenn Sie allen vertrauen, die Dateien auf die Website hochladen können, da eine SVG Code übertragen kann.

Jede SVG ist ihr eigener Upload, ohne Satz, um später zu surfen oder zu suchen Elementors Hilfeartikel zur Symbolbibliothek Stellt außerdem fest, dass Accordion - und Toggle-Widgets kleine Inline-Symbol-Steuerelemente anstelle der üblichen Vorschau verwenden, aber sie öffnen dasselbe Popup Sobald Sie mehr als eine Handvoll Symbole benötigen, sparen die nächsten beiden Methoden Zeit.

Methode 2: Laden Sie einen Symbolsatz mit Elementor Pro Custom Icons hoch

Elementor Pro kann als separate Registerkarte eine eigene Symbolschrift in den Picker laden. Es akzeptiert.zip-Dateien, die aus exportiert werden FontelloIcoMoon oder Fontastic, damit Sie aus den SVGs Ihrer Marke ein Set bauen und es an einem Ort aufbewahren können.

1. Baue dein Set in Fontello, IcoMoon oder Fontastic auf und lade es als .zip-Datei herunter.
2. Öffnen Sie in WordPress den Bildschirm Benutzerdefinierte Symbole von Elementor. In Elementor 4 gibt es eine Verknüpfung dazu auf dem Elementor-Homescreen.
3. Klicken Sie auf Neues Symbol hinzufügen Set, legen Sie die Datei .zip ab, benennen Sie das Set und veröffentlichen Sie es.
4. Öffnen Sie ein beliebiges Symbolfeld im Editor Ihr Satz erscheint unter Meine Bibliotheken im Popup Symbolbibliothek.

Elementoreigene Benutzerdefinierte Symbole Leitfaden Listet die Exportschritte für jeden Dienst auf, einschließlich des eindeutigen CSS-Präfixes, das jeder Satz benötigt. Der Haken bei dieser Route ist die Wartung: Sie erstellen oder kaufen zuerst das Set und laden es bei jeder Änderung erneut hoch.

Verbinden Sie Font Awesome Pro

Elementor Pro verbindet auch ein Font Awesome Pro-Abonnement Gehe zu Elementor > Einstellungen > Integrationen, füge deine Font Awesome Pro Kit ID ein und klicke auf Validate Kit ID. Die Pro-Familien werden dann im Picker neben den Standard-Font Awesome-Sets angezeigt.

Methode 3: Fügen Sie 8 Symbolpakete mit Master-Add-ons hinzu

Die Symbolbibliothek Master Addons Erweiterung fügt acht komplette Icon-Packs, insgesamt 5.344 Icons, zum Icon Library Popup hinzu Es wird nichts hochgeladen: Sie schalten ein Pack ein, und seine Icons erscheinen in jedem Icon-Feld auf der Seite.

Die Einrichtung dauert drei Schritte:

1. Gehen Sie zu Master Addons > Einstellungen > Erweiterungen, klicken Sie auf den Icon Library Filter, schalten Sie die gewünschten Packs ein und klicken Sie auf Änderungen speichern.

2. Öffnen Sie ein beliebiges Symbolfeld in Elementor und klicken Sie auf Symbolbibliothek Die neuen Packs sitzen unter Meine Bibliotheken, jeweils mit einem kleinen “M” - Badge.
3. Klicken Sie auf ein Paket, um es zu durchsuchen, oder geben Sie Filter nach Namen ein, um jedes Paket auf einmal zu durchsuchen Wählen Sie ein Symbol aus und klicken Sie auf Einfügen.

Elementor eigene Icon-Schrift (eicons) ist nicht im Standard-Picker Master Addons fügt alle 398 eicons als Tab hinzu, was hilft, wenn Sie Symbole wünschen, die zur Elementoroberfläche passen Feather Icons, Remix Icon und Teenyicons kommen mit Master Addons Pro.

Verwenden Sie Remix Icon für offene und geschlossene Zustände

Die meisten Remix Icon Formen gibt es in einer Linienversion und einer Füllversion, das macht es zu einer guten Übereinstimmung für Widgets mit zwei Symbolzuständen: in der Erweitertes Accordion-Widget, oder Elementors eigenes Akkordeon und Umschalten, setzen Sie die Kontur als geschlossenes Symbol und die ausgefüllte Form als offenes Symbol.

Einrichtungsdetails, das CSS-Klassenpräfix für jedes Paket und Korrekturen für häufige Probleme finden Sie im Icon Library-Einstellungsdokumente.

Welche Methode sollten Sie anwenden?

Die richtige Methode hängt davon ab, was Sie bereits haben.

Die letzte Reihe ist für Leute, die ihre eigenen Widgets bauen Die Symbolsteuerung im Widget Builder Öffnet das gleiche Popup, sodass benutzerdefinierte Widgets jedes Paket verwenden können, das Sie eingeschaltet haben.

So stylen Sie Symbole in Elementor

Symbole aus all diesen Quellen verwenden die normalen Stilsteuerelemente des Widgets Öffnen Sie die Registerkarte Stil, erweitern Sie den Abschnitt Symbol und legen Sie die primäre Farbe, Größe und Drehung fest Wechseln Sie auf die Registerkarte Hover, um die Farbe zu ändern, wenn ein Besucher auf das Symbol zeigt.

Schriftartensymbole nehmen die Farbe an, die Sie festlegen. Das deckt Font Awesome, benutzerdefinierte Symbolsätze und die Master-Addons-Pakete ab. Ein hochgeladener SVG ändert nur dann seine Farbe, wenn seine Pfade keine eigene feste Füllung enthalten. Streichen Sie also hartcodierte Füllwerte aus der Datei, bevor Sie sie hochladen.

Die gleichen Steuerelemente werden auch in anderen Symbol-Widgets angezeigt. Die Info-Box-Widget Kombiniert ein Symbol mit einem Titel und Text sowie unserem Leitfaden Animierte Schaltflächen in Elementor Zeigt an, wie man ein Symbol in einen Knopf legt und ihm eine eigene Hover-Farbe gibt.

Fehlerbehebung bei Elementorsymbolen

Die meisten Symbolprobleme sind auf eine Schriftartdatei zurückzuführen, die nicht geladen wird, oder auf eine Einstellung, die nicht gespeichert wurde.

Symbole werden als leere Quadrate angezeigt

Die Symbolschrift wird nicht geladen Löschen Sie den Cache von Elementor unter Elementor > Extras > Allgemein (Dateien & Daten löschen), dann löschen Sie Ihr Caching-Plugin und CDN. Wenn Ihre Schriftarten von einem CDN auf einer anderen Domäne geladen werden, überprüfen Sie, ob es ursprungsübergreifende Anfragen für Schriftartendateien zulässt.

Elementor akzeptiert meine SVG nicht

Aktivieren Sie Ungefilterte Datei-Uploads unter Elementor > Einstellungen > Erweitert, dann versuchen Sie es erneut mit dem Upload, sollte es dennoch fehlschlagen, öffnen Sie die SVG in einem Texteditor und prüfen Sie, ob es sich um eine echte SVG-Datei handelt und nicht um ein PNG mit einer Extension 'svg.

Ein Master Addons Pack fehlt beim Picker

Überprüfen Sie, ob der Schalter des Pakets unter Master Addons > Einstellungen > Erweiterungen > Symbolbibliothek eingeschaltet ist und dass Sie auf Änderungen speichern geklickt haben, und laden Sie dann den Editor neu. Feather Icons, Remix Icon und Teenyicons benötigen außerdem Master Addons Pro mit einer aktiven Lizenz.

Symbolschriften verlangsamen die Seite

Jede Symbolschriftart ist eine weitere Datei, die der Browser herunterladen kann. Halten Sie sich für ein einheitliches Aussehen an ein oder zwei Pakete und lesen Sie unseren Leitfaden Beschleunigung der Elementor-Websites, das die Option Inline-Schriftartensymbole von Elementor zum Rendern von Symbolen als SVG anstelle von Schriftartdateien abdeckt.

Häufig gestellte Fragen

Letzte Gedanken

Das Hinzufügen benutzerdefinierter Symbole in Elementor hängt davon ab, wo Ihre Symbole beginnen. Ein einzelner SVG gelangt direkt in das Symbolfeld. Eine Markensymbolschrift geht durch die benutzerdefinierten Symbole von Elementor Pro ein, neben Font Awesome Pro, wenn Sie ein Kit haben. Und wenn Sie lieber auswählen als hochladen möchten, legen die acht Master Addons-Pakete 5.344 weitere Symbole in dasselbe Popup.

Um jedes Paket mit Mustern und Symbolanzahl zu sehen, bevor Sie etwas einschalten, durchsuchen Sie das Elementorsymbolbibliothek Seite.

Verwandte Lektüre

• Einstellungen der Symbolbibliothek: Switches, CSS-Präfixe und Fehlerbehebung für alle acht Packs
• Symbolsteuerung im Widget Builder: Verwenden Sie die Packs in Ihren eigenen benutzerdefinierten Widgets
• So fügen Sie einem Kontaktformular 7-Absenden-Button ein Font Awesome-Symbol hinzu
• Alle Master Addons Widgets und Erweiterungen