圖示

Framework7 預設包含一組相當有限的內部圖示，例如 back、forward、prev 和 next 圖示

<i class="icon icon-back"></i>
<i class="icon icon-forward"></i>
<i class="icon icon-prev"></i>
<i class="icon icon-next"></i>

這幾個圖示有助於在 iOS 和 Material 主題之間維持主要導覽元素的一致性。

Framework7 圖示字型

在您的應用程式中，您當然需要更多圖示來呈現您的內容。針對此情況，我們設計了 Framework7 圖示 字型，供 Framework7 的 iOS 主題 使用。預設情況下，它未包含在 Framework7 套件中，最新版本的字型可以在 Framework7 圖示 儲存庫下載。

安裝字型

1. 從 Framework7 圖示 儲存庫下載並解壓縮字型套件
2. 將 framework7-icons.css 複製到您的專案
3. 將 fonts 資料夾複製到您的專案
4. 確保 framework7-icons.css 中的字型 URL 正確參照專案中的 fonts 路徑
5. 在您參照應用程式樣式表的檔案中，包含對 framework7-icons.css 檔案的參照

   <link rel="stylesheet" href="path/to/framework7-icons.css">

秘笈

您可以使用以下 秘笈 輕鬆找到您要使用的圖示。

HTML 範例

將圖示納入您的網頁非常容易。以下是一個小範例

<i class="f7-icons">house</i>

此範例使用稱為 連字 的排版功能，只要使用其文字名稱，即可呈現圖示字形。替換動作由網路瀏覽器自動執行，並提供比等效數值字元參照更具可讀性的程式碼。

設定圖示樣式

調整大小

Framework7 圖示在 28px 時看起來最佳，但如果需要以其他大小顯示圖示，請使用 CSS 字型大小規則

.size-22 { font-size: 22px }
.size-25 { font-size: 25px }
.size-29 { font-size: 29px }
.size-50 { font-size: 50px }

<i class="f7-icons size-22">house</i>
<i class="f7-icons size-25">house</i>
<i class="f7-icons size-29">house</i>
<i class="f7-icons size-50">house</i>

著色

使用圖示字型可以輕鬆設定圖示樣式，使用任何 預設顏色 或自訂顏色。

.color-custom { color: #ff0000 }

<i class="icon f7-icons color-red">house</i>
<i class="icon f7-icons color-yellow">house</i>
<i class="icon f7-icons color-custom">house</i>

同時使用 F7 圖示和 Material 圖示

為了維持最佳實務，最好為 iOS 主題使用 F7 圖示字型，為 MD 主題使用 Material 圖示字型。但如果您同時為 MD 和 iOS 主題開發應用程式，該怎麼辦？

在這種情況下，我們可以使用路由器的 {theme}-only 和 if-{theme} 和 if-not-{theme} 輔助類別，在 iOS 主題中使用 F7 圖示，在 MD 主題中使用 Material 圖示

<i class="f7-icons if-not-md">house</i>
<i class="material-icons md-only">house</i>

在這種情況下，當應用程式使用 iOS 主題執行時，我們將只有 <i class="f7-icons if-not-md">house</i>，而當應用程式在 MD 主題中時，我們將只有 <i class="material-icons md-only">house</i>。