アイコン

デフォルトでは、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 Iconsフォントを設計しました。デフォルトではFramework7パッケージには含まれておらず、フォントの最新バージョンはFramework7 Iconsリポジトリからダウンロードできます。

フォントのインストール

1. Framework7 Iconsリポジトリからフォントパックをダウンロードして解凍します。
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の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アイコンの両方を使用する

ベストプラクティスを維持するために、iOSテーマにはF7アイコンフォント、MDテーマにはMaterial Iconsフォントを使用することをお勧めします。しかし、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>のみが表示されます。