bootstrap圖標庫怎麼用

Bootstrap 圖標庫提供了一系列美觀且簡潔的圖標，可輕鬆添加到項目中。步驟包括：安裝Bootstrap添加CDN 或將其包含在HTML 中使用圖標（）自定義圖標大小和顏色（使用CSS 類）

如何在項目中使用Bootstrap 圖標庫

Bootstrap 圖標庫是一個簡潔且美觀的大量圖標集合，可添加到Bootstrap 項目中。以下是如何使用它：

步驟1：安裝Bootstrap

通過以下方式安裝Bootstrap：

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

步驟2：添加CDN 或將其包含在您的HTML 中

在您的HTML 文件中，包含Bootstrap 圖標庫CDN：

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

或者，將其包含在您的HTML 文件中：

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

步驟3：使用圖標

在您的HTML 中，使用以下語法添加圖標：

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

例如，要添加一個房子圖標，請使用：

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

自定義圖標大小和顏色

您可以使用CSS 類來自定義圖標的大小和顏色：

大小：

• bi-1x ：小號
• bi-2x ：中號
• bi-3x ：大號
• bi-4x ：特大號

顏色：

• bi-primary ：藍色
• bi-secondary ：灰色
• bi-success ：綠色
• bi-danger ：紅色
• bi-warning ：黃色
• bi-info ：藍色

例如，要添加一個大號藍色房子圖標，請使用：

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

提示：

• 確保您使用正確的圖標名稱。完整的圖標列表可在Bootstrap 官方網站上找到。
• 您可以在自定義CSS 中覆蓋默認圖標樣式。
• 圖標庫中還有其他有用的utility 類，例如bi-border-rounded和bi-flip-horizontal 。

以上是bootstrap圖標庫怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！