アイコン

デフォルトでは、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 Iconsフォントを、Framework7のiOSテーマで使用するためにデザインしました。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">

チートシート

以下の cheatsheet を使えば、使いたいアイコンを簡単に見つけることができます。

HTMLの例

アイコンをWebページに組み込むのは簡単です。ここでは、その小さな例を紹介します。

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

この例では、ligaturesと呼ばれるタイポグラフィ機能を使用しています。これは、アイコンのグリフのテキスト名を使用するだけで、そのグリフをレンダリングできるというものです。置き換えはWebブラウザによって自動的に行われ、同等の数値文字参照よりも読みやすいコードを提供します。

アイコンのスタイリング

サイズ調整

しかし、アイコンを別のサイズで表示する必要がある場合は、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アイコンとマテリアルアイコンの併用について

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やAuroraテーマで動作しているときはhouse</i>のみ、MDテーマで動作しているときは<i class="material-icons md-only">house</i>のみとなります。