ionic-framework => イオニコン

備考

現代のWeb開発では、フォントを使用してアイコンを表示するのが一般的です。フォントはベクトルなので、解像度に依存せず、ビットマップイメージなどと比較していくつかの利点を挙げるにはCSSを使って簡単に色付けできます。IoniconsはIonic Frameworkが作成したチームと同じチームによって作成されたもので、彼らは100％無料でオープンソースです。 MITライセンス

Ioniconsは、親要素に応じて特定のスタイルを持っている場合は、独自のアイオニクスCSSコンポーネントまたはIonics CSSコンポーネントで使用できます。

ホームページとアイコンのリストは、 http ： //ionicons.com/で見つけることができます。

基本的な使用法

フォントアイコンは通常、 <i>タグ内に配置されます。 Ionicには、使いやすいアイコンのデフォルトのCSSスタイルがあります。最も基本的な使用例：

<i class="icon ion-home"></i>

長期使用

Ionicには、既定のスタイリングを持つIoniconsを使用できるCSSコンポーネントがいくつかあります。アイテム<div>のrangeクラスは、入力とその内部のアイコンの両方に正しいスタイルを適用します。範囲スライダの例を次に示します。

<div class="item range">
  <i class="icon ion-volume-low"></i>
  <input type="range" name="volume">
  <i class="icon ion-volume-high"></i>
</div>

IonicタブでのIonicon使用のもう1つの例は、タブのようなメニューを作成します。 tabs-striped tabs-color-assertiveクラスは、タブ自体のスタイルを定義します。アイコンは単純な<i>タグとともに使用され、親divに適用されたクラスから位置スタイリングを取得します。

<div class="tabs-striped tabs-color-assertive">
  <div class="tabs">
    <a class="tab-item" href="#">
      <i class="icon ion-home"></i>
      Home
    </a>
    <a class="tab-item" href="#">
      <i class="icon ion-gear-b"></i>
      Settings
    </a>
</div>

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

ionic-framework
イオニコン

サーチ…

備考

基本的な使用法

長期使用