bootstrap圖標怎麼用

使用Bootstrap 圖標庫可以輕鬆地在網絡應用程序中添加圖標。步驟包括：引用圖標庫、使用圖標（通過類名，如）、調整圖標大小（fs-1/2/3/4）、更改圖標顏色（text-primary/secondary等）、組合類以創建不同樣式的圖標。

如何在你的項目中使用Bootstrap 圖標

Bootstrap 提供了一套圖標庫，可方便地在你的網絡應用程序中添加圖標。

使用步驟：

1. 引用Bootstrap 圖標庫

在你的HTML 文檔中，在 標籤內引用Bootstrap 圖標庫：

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

2. 使用圖標

Bootstrap 圖標使用類名來引用。要使用圖標，請在你的HTML 中使用以下語法：

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

例如，要使用"房子" 圖標，使用：

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

3. 圖標大小

你可以通過添加"fs-" 類來調整圖標的大小。可用的大小包括：

• fs-1 (24px)
• fs-2 (16px)
• fs-3 (12px)
• fs-4 (10px)

例如，要將"房子" 圖標設置為中等大小，使用：

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

4. 顏色

你可以使用"text-" 類來改變圖標的顏色。可用的顏色包括：

• text-primary
• text-secondary
• text-success
• text-danger
• text-warning
• text-info
• text-dark

例如，要將"房子" 圖標設置為藍色，使用：

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

5. 組合

你可以組合這些類以創建各種樣式的圖標。例如，要創建一個中等大小的綠色"房子" 圖標，使用：

 <code class="html"><i class="bi-house fs-2 text-success"></i></code>

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