So fügst Du Custom Icons zu Elementor Pro hinzu
Ich zeige dir, wie du aus einer SVG Grafik eine Custom Icon Font erstellst, die du dann zu Elementor Pro hinzufügst.
Was sind Custom Icons
Mit Elementor kannst du ganz einfach Icons von Fontawesome auf deiner Website verwenden, da der WordPress Page-Builder diese Icon-Font bereits vorinstalliert hat. Obwohl bereits die meisten Icons enthalten sind, werden manchmal trotzdem Custom Icons benötigt. Und genau deshalb gibt es die Funktion in Elementor Pro, dass man benutzerdefinierte Icons (sog. Custom Icons) ganz einfach hinzufügen kann.
Vorteile von Custom Icons im Vergleich zu den Fontawesome Icons
- An deine Bedürfnisse angepasst
- Corporate Identity konform
- Einzigartig! Durch deine eigenen Icons hebst du dich von deiner Konkurrenz ab
Welche Dateien können auf Elementor hochgeladen werden?
Mit Elementor Pro können Fontello-, IcoMoon- oder Fontastic-Zip-Dateien via Drag & Drop hochgeladen werden.
Wer jetzt denkt, dass dadurch ausschließlich Icons dieser Plattformen verwendet werden können, der irrt. Mit dem Font-Generator von IcoMoon kannst du ganz einfach aus deinen SVG-Dateien eine Icon Font erstellen, die du dann wiederum hochladen kannst.
Eigene Icon Font mit IcoMoon erstellen
Wir zeigen dir, wie du in 6 Schritten ganz einfach deine eigene Icon Font mit dem Generator von IcoMoon erstellen lassen kannst:
1. Drücke auf Import Icons
2. Wähle deine Vektorgrafikdateien aus (SVG Dateien)
Tipp: Jede Kontur in deiner Vektorgrafik muss in einen Pfad umgewandelt werden. Öffne die Datei mit Inkscape, wähle die Kontur aus und klicke auf Kontur in Pfad umwandeln (Wähle die Symbole aus, die in eine Icon Font umgewandelt werden sollen
3. Drücke auf Generate Font
4. Passe die Namen deiner Icons an
Tipp: IcoMoon löscht Umlaute aus den Dateinamen. Solltest du ä, ü, ö in deinen Dateinamen verwendet haben, so musst du diese manuell anpassen
5. Drücke auf das Zahrad Symbol neben Download und ändere den Namen deiner Font
6. Klicke auf Download
Zip-Datei mit den Custom Icons in Elementor Pro hochladen
Das Hochladen der Zip-Dateien gestaltet sich ganz einfach.
- Öffne Custom Icons
2. Wähle die zuvor gedownloadete Zip-Datei aus und lade Sie hoch
Jetzt sind unsere Custom Icons erfolgreich hochgeladen und können verwendet werden. Du findest diese jetzt in der Icon Bibliothek von Elementor.
