quake 9

Lordicon: Animierte Icons für Ihre Websites und Projekte

Lukas Fuchs vor 7 Monaten in  Technologie 3 Minuten Lesedauer

Was ist Lordicon und wofür wird es verwendet?

Lordicon ist eine webbasierte Plattform, die es dir ermöglicht, animierte Symbole (Icons) für deine Websites und Projekte zu erstellen, zu bearbeiten und zu verwenden. Mit Lordicon kannst du lebendige und ansprechende visuelle Elemente auf deinen Seiten einbinden, um die Benutzerinteraktion zu verbessern, visuelle Geschichten zu erzählen und die Ästhetik deiner Projekte zu verfeinern.

Lordicon wird von Designern, Entwicklern und Unternehmen gleichermaßen eingesetzt, um eine Vielzahl von Zwecken zu erfüllen, darunter:

Hauptanwendungsfälle von Lordicon:

  • Website-Interaktionen: Animierte Symbole können als interaktive Elemente dienen, die beim Scrollen, Hovern oder Klicken Aktionen auslösen.
  • Erklärvideos und Anleitungen: Nutze animierte Symbole, um komplexe Konzepte oder Prozesse visuell darzustellen und sie für das Publikum leichter verständlich zu machen.
  • Social-Media-Werbung: Animierte Symbole können Aufmerksamkeit auf deine sozialen Beiträge lenken und die Interaktionsraten erhöhen.
  • Marketingmaterialien: Integriere animierte Symbole in E-Mails, Präsentationen und andere Marketingmaterialien, um deinen Inhalten einen dynamischen Touch zu verleihen.

Vorteile der Verwendung von Lordicon

Lordicon bietet eine Reihe von Vorteilen, die es zu einer lohnenden Option für die Integration animierter Icons in deine Websites und Projekte machen:

Umfangreiche Icon-Bibliothek

Mit über 2.000 hochwertigen Icons in verschiedenen Stilen und Designs bietet Lordicon eine umfassende Auswahl, aus der du wählen kannst. Du findest Symbole für alle gängigen Kategorien, von Social Media über Technologie bis hin zu Finanzen und mehr.

Anpassbare Symbole

Lordicon ermöglicht es dir, die Symbole nach deinen Wünschen anzupassen, indem du Farbe, Größe, Animation und andere Eigenschaften änderst. Du kannst auch deine eigenen benutzerdefinierten Symbole erstellen und mit anderen teilen.

Einfache Integration

Lordicon lässt sich mühelos in deine Websites integrieren, unabhängig von der verwendeten Technologie. Du kannst ihre Icons über ihre CDN-Bibliothek oder durch die direkte Einbettung von Code hinzufügen.

Verbesserte Benutzererfahrung

Animierte Icons können die Benutzererfahrung deiner Website erheblich verbessern, indem sie ihr ein dynamisches und ansprechendes Element verleihen. Sie können die Aufmerksamkeit auf wichtige Aufrufe zum Handeln lenken und die Navigation intuitiver gestalten.

SEO-Vorteile

Lordicon-Symbole sind SVG-basiert, was sie suchmaschinenfreundlich macht. Sie können helfen, deine Website in Suchergebnissen höher zu ranken, indem sie eine semantische Bedeutung für deine Inhalte hinzufügen.

Kosteneffizient

Lordicon bietet eine Vielzahl von Preisplänen, darunter eine kostenlose Option für kleine Projekte. Der kostenpflichtige Plan bietet noch mehr Funktionen, wie z. B. unbegrenzte Symbole, benutzerdefinierte Farben und erweiterte Anpassungsoptionen.

So integrierst du Lordicon in deine Websites

Um Lordicon zu nutzen, musst du Folgendes tun:

1. Hol dir den Lordicon-Code

  • Gehe auf die Lordicon-Website (https://lordicon.com).
  • Suche oder erstelle das gewünschte Symbol.
  • Klicke auf die Schaltfläche "Get Codes".
  • Kopiere den entsprechenden Code (z. B. HTML oder React).

2. Füge den Code zu deiner Website hinzu

  • Füge den kopierten Code in den HTML-Code deiner Seite ein.
  • Verwende den <script>-Tag, um die Lordicon-Bibliothek einzubinden.
  • Füge den <lord-icon>-Tag hinzu, um das Symbol zu rendern.

3. Passe das Symbol an (optional)

  • Attribute wie Größe, Farbe und Animation können über CSS angepasst werden.
  • Verwende die CSS-Klasse .lordicon mit dem Element-ID des Symbols (z. B. lordicon-123).

Beispiel-Code

<script src="https://cdn.lordicon.com/libs/lord-icon-2.1.0.js"></script>
<lord-icon
  src="https://cdn.lordicon.com/gmzxduks.json"
  id="lordicon-123"
  style="width: 100px; height: 100px"
  loop
  autoplay
></lord-icon>

Tipps für die Integration

  • Verwende für beste Leistung ein CDN (Content Delivery Network), um die Lordicon-Bibliothek zu hosten.
  • Verwende Inline-CSS für die Symbolanpassung, um den globalen Stylesheet nicht zu überladen.
  • Vermeide die Verwendung zu vieler animierter Symbole auf einer einzigen Seite, da dies zu Performanceproblemen führen kann.

So erstellen und bearbeiten Sie Lordicon-Symbole

Sobald du ein Lordicon-Konto erstellt hast, kannst du damit beginnen, deine eigenen animierten Symbole zu erstellen und zu bearbeiten. Folge diesen Schritten:

Ein neues Symbol erstellen

  1. Gehe zu "Symbole erstellen": Klicke in deinem Lordicon-Dashboard auf die Schaltfläche "Symbol erstellen".
  2. Wähle eine Vorlage oder beginne von vorne: Du kannst Lordicons Vorlagen durchsuchen oder dein eigenes SVG-Symbol hochladen, um damit zu beginnen.
  3. Symbol anpassen: Verwende die Bearbeitungstools, um Farbe, Größe, Stil und Animationen anzupassen.

Ein vorhandenes Symbol bearbeiten

  1. Gehe zu "Meine Symbole": Klicke in deinem Lordicon-Dashboard auf die Registerkarte "Meine Symbole".
  2. Finde das Symbol: Suche das Symbol, das du bearbeiten möchtest, entweder über die Suchleiste oder indem du durch die Liste scrollst.
  3. Klicke auf "Bearbeiten": Klicke auf das Stiftsymbol neben dem Symbol, um es zu bearbeiten.
  4. Vornehmen von Änderungen: Nimm die gewünschten Änderungen am Symbol vor, wie in Schritt 3 beschrieben.

Tipps für die Erstellung und Bearbeitung von Lordicon-Symbolen

  • Verwende einfache Formen: Komplexe Formen können bei der Animation zu Verzögerungen führen.
  • Beschränke die Animationen: Übermäßige Animationen können die Leistung deiner Website beeinträchtigen.
  • Optimiere deine Symbole: Komprimiere deine SVG-Dateien, um die Ladezeiten zu verkürzen.
  • Übe dich mit den Bearbeitungstools: Lordicon bietet eine Vielzahl von Optionen, daher ist es ratsam, mit den Einstellungen zu experimentieren, um das gewünschte Ergebnis zu erzielen.
  • Nutze die Lordicon-Community: In den Lordicon-Foren kannst du Fragen stellen und von anderen Designern lernen.

Häufig gestellte Fragen zu Lordicon

Was ist der Unterschied zwischen den verschiedenen Lizenzstufen?

Lordicon bietet drei Lizenzstufen an:

  • Kostenlos: Für nicht-kommerzielle Projekte mit weniger als 100.000 Seitenaufrufen pro Monat.
  • Pro: Für kommerzielle Projekte und unbegrenzte Seitenaufrufe mit erweiterten Funktionen wie der Erstellung und Bearbeitung von Symbolen.
  • Enterprise: Für Unternehmen mit benutzerdefinierten Lösungen, dediziertem Support und Massenlizenzierung.

Wie kann ich Lordicon in meine Website integrieren?

Es gibt zwei Möglichkeiten, Lordicon in deine Website zu integrieren:

  • Mit HTML und CSS: Verwende den bereitgestellten Code, um Symbole aus der Lordicon-Bibliothek einzubinden und anzupassen.
  • Mit WordPress-Plugin: Installiere das Lordicon WordPress-Plugin, um Symbole einfach per Drag-and-Drop in deine Beiträge und Seiten einzufügen.

Kann ich Lordicon-Symbole bearbeiten?

Ja, mit der Pro-Lizenz kannst du Lordicon-Symbole erstellen und bearbeiten. Du kannst:

  • SVG-Dateien importieren und in animierte Symbole umwandeln.
  • Symbolpfade, Farben und Animationen anpassen.
  • Eigene Symbole erstellen und in deine Lordicon-Bibliothek hochladen.

Gibt es Einschränkungen bei der Verwendung von Lordicon?

Je nach Lizenzstufe gibt es bestimmte Einschränkungen:

  • Kostenlos: Die Symbole dürfen nicht verkauft oder weiterverbreitet werden.
  • Pro: Die Symbole können nur für ein einziges Projekt verwendet werden.
  • Enterprise: Die Symbole können für mehrere Projekte verwendet werden, erfordern jedoch eine benutzerdefinierte Lizenzvereinbarung.

Preise und Tarife für Lordicon

Lordicon bietet sowohl kostenlose als auch Premium-Tarife an, um den Bedürfnissen verschiedener Nutzer gerecht zu werden.

Kostenloser Tarif

Der kostenlose Tarif von Lordicon ermöglicht dir die Nutzung einer begrenzten Anzahl von Symbolen und Funktionen. Du kannst auf über 500 kostenlose Symbole zugreifen, die du auf deiner Website oder in deinen Projekten verwenden kannst. Allerdings sind einige erweiterte Funktionen, wie z. B. die Möglichkeit, Symbole zu bearbeiten oder zu animieren, im kostenlosen Tarif nicht enthalten.

Premium-Tarif

Der Premium-Tarif von Lordicon bietet dir Zugriff auf die gesamte Sammlung von über 2.000 Symbolen sowie erweiterte Funktionen wie:

  • Symbolbearbeitung
  • Symbolanimation
  • Symbolerstellung
  • Prioritäts-Support

Es gibt drei verschiedene Premium-Pläne zur Auswahl:

Business-Tarif:

  • 99 US-Dollar pro Jahr
  • Zugang zu allen Symbolen und Funktionen
  • 5.000 API-Aufrufe pro Monat

Enterprise-Tarif:

  • Preis auf Anfrage
  • Zugriff auf alle Symbole und Funktionen
  • Unbegrenzte API-Aufrufe
  • Dedizierter Kundensupport

Welcher Tarif ist der richtige für dich?

Wenn du nur ein paar einfache Symbole für deine Website benötigst, ist der kostenlose Tarif möglicherweise ausreichend. Wenn du jedoch erweiterte Funktionen wie Symbolbearbeitung oder Animation benötigst, ist ein Premium-Tarif möglicherweise die bessere Wahl.

Zahlungsoptionen

Lordicon akzeptiert die folgenden Zahlungsoptionen:

  • Kreditkarten (Visa, Mastercard, American Express)
  • PayPal
  • Überweisung

Rückerstattungen

Lordicon bietet eine 30-tägige Geld-zurück-Garantie für alle Premium-Tarife. Wenn du mit dem Dienst nicht zufrieden bist, kannst du innerhalb von 30 Tagen nach dem Kauf eine Rückerstattung beantragen.

Alternativen zu Lordicon

Wenn Lordicon nicht das Richtige für dich ist, stehen dir zahlreiche Alternativen zur Verfügung, die dir dabei helfen, animierte Symbole in deine Websites und Projekte zu integrieren.

LottieFiles

LottieFiles ist eine Plattform, die eine Vielzahl animierter Symbole und Grafiken bietet. Ähnlich wie Lordicon kannst du diese Symbole problemlos in deine Websites einbetten und sie per HTML, CSS oder JavaScript steuern. LottieFiles bietet auch eine kostenlose Version mit eingeschränkten Funktionen an.

Animista

Animista ist eine Sammlung von kostenlosen animierten CSS-Symbolen, die du ohne externe Abhängigkeiten direkt in deine Websites integrieren kannst. Die Symbole sind leichtgewichtig und eignen sich hervorragend für einfache Animationen. Beachte jedoch, dass Animista keine benutzerdefinierten Symbolerstellungen unterstützt.

Iconify

Iconify ist eine Plattform, die Zugriff auf eine umfangreiche Bibliothek statischer und animierter Symbole bietet. Neben Lordicon bietet Iconify auch Integrationen für Vue, React, Angular und andere Front-End-Frameworks. Iconify stellt eine kostenlose Version mit eingeschränkten Funktionen zur Verfügung.

Weitere Alternativen

  • Airbnb Lottie: Eine Open-Source-Bibliothek für die Erstellung und Wiedergabe komplexer Animationen.
  • GreenSock Animation Platform (GSAP): Eine professionelle JavaScript-Bibliothek für die Erstellung komplexer und leistungsstarker Animationen.
  • Mo.js: Eine Open-Source-JavaScript-Bibliothek für die Erstellung einfacher bis komplexer Animationen.

Bei der Auswahl einer Alternative zu Lordicon solltest du Faktoren wie die Kosten, die Funktionsvielfalt, den Benutzerkomfort und die Integration mit deinen vorhandenen Technologien berücksichtigen. Die oben aufgeführten Alternativen bieten unterschiedliche Funktionen und Preisklassen, sodass du diejenige auswählen kannst, die deinen spezifischen Anforderungen am besten entspricht.

Folge uns

Neue Posts

Beliebte Posts