图标

默认情况下，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>`。