Ionicでモバイルアプリを作ろう!(21)アイコンを表示する


クロスプラットフォーム対応のモバイルアプリ開発フレームワークであるIonicの使い方を紹介していきます。

今回はアプリのUI上にアイコンを表示する方法を紹介します。

Ionicons

IonicにはIoniconsというアイコンライブラリがあらかじめ用意されており、シンプルながら便利なアイコンを簡単に使うことができます。Ioniconsには700以上のアイコンが用意されています。各デザインとその名前はこちらIoniconsから確認できます。

使い方

使い方は簡単でion-iconコンポーネントをテンプレートに記述し、そのname属性に上記リンク先のnameを指定すればOKです。

...
<ion-content padding>
    <ion-icon name="logo-twitter"></ion-icon>
    <ion-icon name="logo-facebook"></ion-icon>
    <ion-icon name=">paper-plane"></ion-icon>
    <ion-icon name="headset"></ion-icon>
</ion-content>
page-home {
    ion-icon {
        font-size: 50px;
        margin: 16px;
    }
}

端末のOSに応じて自動的に各OSに適したデザインのアイコンを選択してくれます。

明示的な画像の指定

端末ごとに利用するアイコンを明示的に指定することも可能です。ion-iconコンポーネントには属性として、name以外にmdiosが定義されており、それぞれにアイコンのnameを指定できます。Androidの場合はmd、iOSの場合はiosになります。
ちなみにmdというはMaterial Designの略ですね。

<ion-icon ios="logo-apple" md="logo-android"></ion-icon>

 

  • このエントリーをはてなブックマークに追加

PAGE TOP