So fügen Sie Bootstrap -Symbole in HTML und CSS hinzu

Bootstrap ist ein Open-Source-Framework, das die Reaktionsfähigkeit von Webseiten verbessert. Bootstrap -Symbole können in einem HTML -Dokument verwendet werden, und CSS können angewendet werden, um diesen Symbolen verschiedene Eigenschaften hinzuzufügen. Bootstrap unterstützt eine lange Liste von Symbolen in mehreren Formaten wie SVGs, Web-Font, SVG Sprite. Dieser Artikel führt Sie dazu, Bootstrap -Symbole in HTML und CSS hinzuzufügen.

So fügen Sie Bootstrap -Symbole in HTML und CSS hinzu

Die Bootstrap-Symbole können in HTML und CSS mithilfe des CDN-Links von Bootstrap-ICons hinzugefügt werden. In diesem Abschnitt werden beide Methoden beschrieben, um Bootstrap -Symbole in HTML und CSS hinzuzufügen.

So fügen Sie Bootstrap -Symbole mit CDN -Link hinzu

Mit dem Link CDN (Content Delivery/Distribution Network) können Sie die CSS-, JS- und JQuery -Bibliotheken sehr einfach hinzufügen. Wenn Sie den CDN-Link von Bootstrap-ICons daddieren, müssen Sie die Bootstrap-Symbole nicht mit HTML herunterladen und integrieren. Mit den kommenden Schritten werden CDN -Links hinzugefügt, gefolgt vom Hinzufügen von Bootstrap -Symbole.

Schritt 1: Fügen Sie den CDN -Link der Bootstrap -Symbole hinzu

Bootstrap5 ist die neueste Version des Bootstraps. Kopieren Sie den folgenden Link in das Tag.

Schritt 2: Hinzufügen von Bootstrap -Symbolen

Um Bootstrap -Symbole hinzuzufügen, müssen Sie die folgende Syntax verwenden.

In der obigen Syntax die BI-Klassenname repräsentiert den Klassennamen der Symbole wie BI-Suche, Bi-Kalendar, Bi-Facebook usw.,

Beispiel

In diesem Beispiel werden die Kursstrap-Symbole-Klasse verwendet, um das Symbol von LinkedIn und Thumbs-hoch zu drucken.

LinkedIn-Icon:

Daumen-Icon:

Es werden zwei Absätze erstellt, in denen das LinkedIn -Symbol und das Daumen -Up -Symbol verwendet wird Bi-linkedin Und Bi-Hands-Thumbs-Up-Fill Klassen von Bootstrap-ICons.

Ausgang

Die Ausgabe zeigt, dass das LinkedIn-Symbol und das Thumbs-Up-Symbol erfolgreich in das HTML-Dokument integriert wurden.

Abschluss

Die Bootstrap -Symbole können HTML und CSS mithilfe von CDN -Link von Standard -Symbole hinzugefügt werden. Die Standard -Symbole -Unterstützung wird von Bootstrap selbst bereitgestellt und Sie müssen den CDN -Link von Bootstrap -Symbole in Ihr HTML -Dokument hinzufügen. Dieser beschreibende Beitrag, mit dem Sie Bootstrap -Symbole in HTML und CSS hinzufügen können. Darüber hinaus lernen Sie, eine Umgebung von Bootstrap-ICons mit HTML und CSS einzurichten.