So fügen Sie Ionicons in HTML und CSS hinzu

Wenn Sie Ihre Gedanken in Worten ausdrücken, kann ein wenig schwieriger Prozess sein und langwierige Details über irgendetwas fehlt, kann die Aufmerksamkeit des Benutzers fehlen. Daher kann es ein besserer Ansatz sein, die Symbole auf einer Website anstelle von Text zu fügen. Die Symbole sind ein wesentlicher Bestandteil jeder Website geworden, da die ordnungsgemäße Verwendung von Symbolen die genaue Nachricht in visueller Form ausdrücken kann.

Um Symbole in eine Website einzubetten, stehen mehrere Symbolsätze zur Verfügung. Eine der wichtigsten unter ihnen ist Ionicons. Der Inoicons sind allen frei zur Verfügung und können effektive Ergebnisse für alle wichtigen Plattformen wie iOS, Desktop usw. liefern.

Diese Beschreibung präsentiert ein detailliertes Verständnis für die Verwendung Ionicons In HTML und in dieser Hinsicht müssen wir den folgenden Konzepten folgen:

• Was sind Ionicons
• Wie man Ionicons benutzt
• Ionicons Stiles

Lasst uns beginnen

Was sind Ionicons

Es ist ein frei zugängliches Symbol, das mehr als siebenhundert Symbole für fast jede Plattform wie Android, Web, Desktop usw. bietet.

Wie man Ionicons benutzt

Um Ionicons zu verwenden, befolgen Sie die nachstehend bereitgestellte Schritt-für-Schritt-Anleitung:

Erster Schritt

Um Ionicons auf einer Website hinzuzufügen, müssen Sie als erstes einen Webbrowser öffnen und nach dem suchen "Ionicons":

Klicken Sie auf die Ionicons führt Sie zur folgenden Seite:

Oder klicken Sie hier, um die offizielle Website von Ionicons zu besuchen.

Zweiter Schritt

Danach müssen Sie auf die klicken Verwendung Option, wie in der folgenden Abbildung erwähnt:

Klicken Sie auf die "Verwendung" Die Option öffnet eine neue Seite:

Dritter Schritt

Scrollen Sie ein wenig nach unten und Sie werden eine finden "Installation" Abschnitt. In der Installationsoption finden Sie einige Skripte:

Kopieren Sie beide Skripte und fügen Sie sie in die Nähe des Schlusskörpers Ihres HTML -Dokuments oder in das Head -Tag Ihrer Webseite ein:

Vierter Schritt

Jetzt können wir die Ionicons in unserem HTML -Dokument laden. Um dies zu tun, gehen Sie zurück zum "Verwendung" Registerkarte und scrollen Sie ein wenig nach unten, um die zu finden "Grundnutzung" Abschnitt Um zu verstehen, wie die Ionicon -Komponente verwendet wird:

Fünfter Schritt

Nun gehen Sie zurück zum "Ikonen" Registerkarte und suchen Sie nach dem Symbol Ihrer Wahl:

Wenn Sie auf das Symbol klicken, wird der Code der Komponente angezeigt:

Sechster Schritt

Kopieren Sie den Code und fügen Sie ihn in Ihr HTML -Dokument ein:

Im Folgenden finden Sie die Ausgabe für den oben gegebenen Snippet:

Die Ausgabe überprüft, dass das “Ionicons “ Home -Symbol wird erfolgreich zu unserer HTML -Seite hinzugefügt. Auf diese Weise können Sie so viele einfügen Ionicons wie du willst.

Ionicons Stiles

Sie können die Symbole aus drei verschiedenen Stilen auswählen, wie im folgenden Snippet gezeigt:

Beispiel

In diesem Beispiel wird ein Heim Ionicons aller drei Stile verwendet:

Ionicons in HTML

Der oben gegebene Snippet erzeugt die folgende Ausgabe:

Die Ausgabe zeigt, wie Umriss, gefüllt und scharfe Stile aussehen. Unter diesen Stilen i.e. Umriss, gefüllt, scharf, können Sie jeden Stil auswählen, der Ihren Anforderungen entspricht.

Abschluss

Um ein Ionicon in HTML einzubetten, müssen Sie nur die Skripte aus dem Installationsabschnitt der Ionicons kopieren und in Ihr HTML -Dokument einfügen. Wählen Sie anschließend das Ionicon Ihrer Wahl, kopieren Sie den Komponentencode und fügen Sie ihn in Ihr HTML -Dokument ein. Diese Beschreibung bietet ein detailliertes Verständnis dafür, was Ionicons sind und wie Ionicons in HTML implementiert/verwendet werden können. Screenshots werden mit jedem Schritt zur Verfügung gestellt, um die Konzepte gründlich zu verstehen.