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