图标

默认情况下，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图标字体，用于与iOS主题的Framework7一起使用。默认情况下，它不包含在Framework7包中，最新版本的字体可以从Framework7图标存储库下载。

安装字体

1. 从Framework7图标存储库下载并解压字体包
2. 将framework7-icons.css复制到您的项目
3. 将fonts文件夹复制到您的项目
4. 确保字体URL在framework7-icons.css中正确引用您的项目中的fonts路径
5. 在您引用应用样式表的framework7-icons.css文件中包含对

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

提示单

您可以使用以下提示单轻松找到您想要使用的图标。

HTML示例

将图标集成到您的网页中很容易。这里有一个小示例：

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

此示例使用一种称为连字的排版功能，它允许仅通过使用其文本名称来渲染图标字形。替换由网络浏览器自动完成，并提供比等效的数字字符引用更易读的代码。

图标样式

尺寸

Framework7图标在28px时看起来最佳，但如果图标需要以替代尺寸显示，只需使用CSS font-size规则：

.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图标

为了保持最佳实践，最好使用F7图标字体用于iOS主题，使用Material图标字体用于MD主题。但如果您为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>。