Custom Icons Elementor Pro

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:

IcoMoon Icon Font Generator
IcoMoon – So erstellst du deine eigene Icon Font (1/2)

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

IcoMoon Icon Font Generator
IcoMoon – So erstellst du deine eigene Icon Font (2/2)

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.

  1. Öffne Custom Icons
Custom Icons Elementor Menü
Custom Icons zu Elementor hinzufügen

2. Wähle die zuvor gedownloadete Zip-Datei aus und lade Sie hoch

Elementor Custom Icons
Hochgeladene Icons im Elementor

Jetzt sind unsere Custom Icons erfolgreich hochgeladen und können verwendet werden. Du findest diese jetzt in der Icon Bibliothek von Elementor.

Custom Icons Elementor 1
Custom Icons in der Icon Bibliothek von Elementor

Wir freuen uns auf Sie!

© Grafikingenieur 2021 | Made in Würzburg | Impressum & Datenschutz