So verwenden Sie die Bootstrap -Symbolbibliothek

Die Bootstrap -Symbolbibliothek bietet eine Reihe schöner und prägnanter Symbole, die Ihrem Projekt problemlos hinzugefügt werden können. Zu den Schritten gehören: Startstrap installieren, um ein CDN hinzuzufügen, oder in HTML -Verwendung icons () einbeziehen, um die Größe und Farbe der Icon anzupassen (mit der CSS -Klasse).

So verwenden Sie die Bootstrap -Symbolbibliothek in einem Projekt

Die Bootstrap -Symbolbibliothek ist eine einfache und schöne Sammlung großer Sammlungen von Ikonen, die zu Bootstrap -Projekten hinzugefügt werden können. Hier erfahren Sie, wie man es benutzt:

Schritt 1: Startstrap installieren

Installieren Sie Bootstrap auf folgende Weise:

 <code class="bash">npm install bootstrap</code>

Schritt 2: Fügen Sie eine CDN hinzu oder geben Sie sie in Ihr HTML ein

Fügen Sie in Ihrer HTML -Datei die Bootstrap -Symbolbibliothek CDN hinzu:

 <code class="html"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css"></code>

Oder geben Sie es in Ihre HTML -Datei ein:

 <code class="html"><link rel="stylesheet" href="node_modules/bootstrap-icons/font/bootstrap-icons.css"></code>

Schritt 3: Verwenden Sie das Symbol

Fügen Sie in Ihrem HTML Symbole mit der folgenden Syntax hinzu:

 <code class="html"><i class="bi bi-icon-name"></i></code>

Um zum Beispiel ein Haussymbol hinzuzufügen, verwenden Sie:

 <code class="html"><i class="bi bi-house"></i></code>

Passen Sie die Größe und Farbe der Symbol an

Sie können die CSS -Klasse verwenden, um die Größe und Farbe des Symbols anzupassen:

Größe:

• bi-1x : klein
• bi-2x : mittelgroße Größe
• bi-3x : Große Größe
• bi-4x : Extra große Größe

Farbe:

• bi-primary : Blau
• bi-secondary : Grau
• bi-success : grün
• bi-danger : Rot
• bi-warning : Gelb
• bi-info : Blau

Verwenden Sie beispielsweise ein großes Ikone mit Blue House -Symbol, um zu fügen:

 <code class="html"><i class="bi bi-house bi-3x bi-primary"></i></code>

Hinweis:

• Stellen Sie sicher, dass Sie den richtigen Symbolnamen verwenden. Eine vollständige Liste der Symbole finden Sie auf der offiziellen Bootstrap -Website.
• Sie können den Standardsymbolstil in Ihrem benutzerdefinierten CSS überschreiben.
• Es gibt andere nützliche Versorgungsklassen in der ICON-Bibliothek, wie bi-border-rounded bi-flip-horizontal

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Bootstrap -Symbolbibliothek. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!