Wenn du das Avada Theme nutzt und nach einer Möglichkeit suchst, individuelle Icons hinzuzufügen – sei es dein eigenes Logo oder ein spezielles Symbol – dann bist du hier genau richtig! In dieser Anleitung zeige ich dir, wie du ein eigenes Icon erstellst und es in Avada integrierst. Das Beste daran: Du benötigst keine Programmierkenntnisse, nur ein paar praktische Tools.
Du kannst dir dazu das Video ansehen oder unten die Schritt für Schritt Anleitung nutze. Am Ende findest du alle erwähnten Links.
Sie sehen gerade einen Platzhalterinhalt von Vimeo. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen1. Eigene Grafik erstellen
Zunächst benötigst du eine Grafik, die als Icon dienen soll. Dafür eignet sich Canva hervorragend.
- Öffne Canva und erstelle eine neue Grafik mit den Maßen 256 x 256 Pixel.
- Lade dein Design hoch oder erstelle eine neue Grafik. In meinem Fall habe ich eine Pfote für meinen Cookie gewählt.
- Wenn du Canva Pro nutzt, kannst du die Grafik jetzt als PNG ohne Hintergrund exportieren.
- Nutzt du die kostenlose Version, brauchst du einen Background Remover (im Web gibt es kostenlose Tools wie z.B. remove.bg).
Tipp: Achte darauf, dass dein PNG freigestellt ist – also mit grauen Kästchen im Hintergrund.
2. PNG in SVG umwandeln
Damit Avada dein Icon erkennt, muss als nächstes die PNG-Datei in ein SVG-Format konvertiert werden. Hierfür eignet sich der Online-Converter (kostenlos verfügbar).
- Lade dein PNG hoch und starte die Umwandlung in SVG.
- Lade die fertige SVG-Datei herunter.
3. SVG mit Icomoon bearbeiten
Jetzt kommt Icomoon ins Spiel – ein kostenloses Tool, um SVG-Dateien in Schriftarten umzuwandeln.
- Öffne Icomoon und klicke auf „Import Icons“, um deine SVG-Datei hochzuladen.
- Wähle das hochgeladene Icon aus und klicke auf „Generate Font“.
- Speichere die erstellte Schriftart als ZIP-Datei.
4. Icon in Avada hochladen
Nun integrieren wir die Schriftart in Avada.
- Gehe dazu in das Backend deiner Webseite unter Avada → Icons.
- Erstelle ein neues Icon-Set, in meinem Fall habe ich es z. B. „Cookie“ genannt.
- Lade die ZIP-Datei hoch, die du in Icomoon erstellt hast.
- Dein Icon ist jetzt verfügbar und kann auf deiner Webseite verwendet werden.
5. Icon auf der Webseite einfügen
- Öffne die gewünschte Seite in Avada.
- Wähle das Icon-Element und füge dein Icon ein. Es erscheint in einem separaten Tab mit dem Namen deines Icon-Sets.
- Passe dein Icon an – z. B. zentrieren, Farbe ändern oder einen Rahmen hinzufügen.
Fazit: Dein individuelles Icon in Avada
Mit dieser Methode kannst du deine Webseite noch persönlicher gestalten. Dein individuelles Icon ist nicht nur einzigartig, sondern verleiht deiner Seite einen professionellen Touch.
Hast du diese Anleitung ausprobiert? Teile gerne deine Ergebnisse in den Kommentaren oder verlinke deine Webseite – ich freue mich darauf, dein Icon zu sehen! 😊
Viel Erfolg beim Ausprobieren!
Alles Liebe, deine
Tools & Links
- Canva
- Remove.bg (wenn du kein Canva Pro hast)
- Online-Converter
- Icomoon
