Federsymbole sind eine Sammlung von Schriftarten, die in Anwendungen und Websites verwendet werden können. Es bietet skalierbare Vektorgrafik -Symbole, die in Bezug auf Schatten, Farbe, Größe und jede andere Eigenschaft, die CSS verarbeiten kann, sehr anpassbar sind. Entwickler und Designer, die an verschiedenen Plattformen arbeiten.

In dieser Beschreibung wird die Methode diskutiert, um Verwenden Sie Federsymbole In Html Und CSS. Darüber hinaus werden Beispiele im Zusammenhang mit dem angegebenen Verfahren bereitgestellt. So lass uns anfangen!

Notiz: Stellen Sie vor dem Umzug sicher, dass Sie Federsymbole installiert haben. Wenn Sie es nicht bereits haben, folgen Sie dem untergegebenen Abschnitt.

So installieren Sie Federsymbole

Es gibt verschiedene Methoden zur Installation von Federsymbolen. Wir haben jedoch die einfachste zusammengestellt, damit Sie Feder -Ikonen in HTML und CSS ohne Probleme einbetten können.

Methode 1: Installieren von Federsymbolen mit CDN

Inhaltsdelieferetzwerk (CDN) Bietet Zugriff auf die JavaScript -Dateien, die von Menschen auf der ganzen Welt verwendet werden. Sie können eine der folgenden Links zum Hinzufügen von Federsymbolen zu Ihrer HTML -Datei verwenden:

ODER

Methode 2: Installieren von Federsymbole mithilfe der NPM -Bibliothek

“Feder-IconsIst eine NPM -Bibliothek, mit der Feather -Schriftart in eine JavaScript -Anwendung integriert wird. Wenn Sie Federsymbole über die NPM -Bibliothek installieren möchten, müssen Sie diesen Befehl im Terminal ausführen:

NPM feather -icons -Save installieren

Methode 3: Installieren von Federsymbolen durch Herunterladen seiner Sammlung

Laden Sie zunächst den Reißverschluss der Feder -Symbole herunter und kopieren Sie dann die “Schriftart/" Und "CSS/Verzeichnisse in Ihrem Projekt. Gehen Sie als Nächstes zu Ihrer HTML -Datei und geben Sie den Pfad der “anFedericon.Mindest.CSS"Datei in der"" Schild:

So verwenden Sie Federsymbole in HTML und CSS

Um das Verfahren der Verwendung von Federsymbole in HTML und CSS zu demonstrieren, werden wir eine neue HTML -Datei namens erstellenmeine Datei.html”In Visual Studio Code:

In "meine Datei.html"Datei" fügen wir zunächst den Link des Feder -Symbolpakets als Quelle in das "hinzu"" Schild:

Dann geben wir die Symbole an “anDatenfeder”Attributwert in der Schild. Sie können aus dem angegebenen Code sehen, wir verwenden “Stern","Quadrat","Glocke", Und "vergeben”Federsymbole in der HTML -Datei:

Wir verwenden Federsymbole in HTML und CSS

Zuletzt werden wir uns die Feder anrufen.Ersetzen () Methode zum Ersetzen der DOM -Elemente durch die hinzugefügten Federsymbole:

So sieht der komplette Code in unserem aus “meine Datei.html”:

Öffnen Sie die Datei im Browser und schauen Sie sich die Federsymbole an, die wir in der "verwendet haben"meine Datei.html" Datei:

Zu diesem Zeitpunkt haben Sie das grundlegende Layout der Federsymbole in der HTML -Datei festgelegt. Wenn Sie nun den Stil der Feder -Symbole anpassen möchten, können Sie diesen Vorgang mit Hilfe von CSS ausführen.

In unserer "Stil.CSSDatei, wir definieren drei Klassen, um die Größe der Federsymbole festzulegen:

.Feder-10
Breite: 10px;
Höhe: 10px;

.Feder-24
Breite: 24px;
Höhe: 24px;

.Feather-48
Breite: 48px;
Höhe: 48px;

Um diese Einstellungen auf ein Federsymbol anzuwenden, müssen Sie die erforderliche CSS -Klasse auf folgende Weise erwähnen:

Speichern Sie erneut Ihre HTML -Datei, öffnen Sie sie in Ihrem bevorzugten Browser und beachten Sie den Unterschied im Styling der Federsymbole:

Das drehte sich nur um die grundlegende Verwendung von Federsymbolen in HTML und CSS. Um weiter zu untersuchen, lesen Sie die Dokumentation der Feder -Symbole.

Abschluss

Um Federsymbole in HTML und CSS zu verwenden. Nach der Installation von Federsymbole können Sie seine schöne Sammlung von Symbolen integrieren und nach Ihren Vorlieben mit CSS stylen. In diesem Artikel wurde die Methode zur Verwendung von Federsymbole in HTML und CSS besprochen. Darüber hinaus werden auch Beispiele im Zusammenhang mit dem angegebenen Verfahren bereitgestellt.