HTMLのみでアイコンを制御する方法。サイズ・色・動きなど
今回の記事では、HTMLのみを使ってアイコンを制御する方法をご紹介します。
以前の記事で、アイコンを表示する方法をご紹介しました。今回はその応用編で、アイコンを制御する方法です。
somegoro.hatenablog.com
アイコンを制御する方法
制御したいアイコンに対して、クラスを追加します。具体的な書き方として次の5種類をとりあげて記載します。
・Larger Icons（大きさ倍率制御）
・Unify Icons（種類間の大きさ統一）
・Color Icons（色の制御）
・Animated Icons（動きの制御）
・Rotated & Flipped Icons（傾きの制御）
Larger Icons
アイコンの大きさを制御します。それぞれ標準サイズ、2倍サイズ、3倍サイズ、4倍サイズ、5倍サイズです。
<div class="fa fa-camera-retro fa-lg"></div> <div class="fa fa-camera-retro fa-2x"></div> <div class="fa fa-camera-retro fa-3x"></div> <div class="fa fa-camera-retro fa-4x"></div> <div class="fa fa-camera-retro fa-5x"></div>
Unify Icons
アイコン表示のサイズを統一します。アイコンのサイズは種類によりそれぞれ違います。そのため、異なる種類のアイコンを使用してリストを作るときにはガタガタになってしまいます。それを回避するため各種アイコンのサイズを揃えます。
また、アイコンを2倍サイズや3倍サイズなどにすると隣り合った要素との幅が狭くなってしまいます。そんなときは、この「fa-fw」を適用すると上手く表示されます。ですのでこの記事では常に「fa-fw」を適用してアイコンを表示しています。（HTMLコードを記載するときはわかりにくいので記載していません）
ホーム
スケジュール
Github
設定
<i class="fa fa-home fa-fw"></i>ホーム <i class="fa fa-calendar fa-fw"></i>スケジュール <i class="fa fa-github fa-fw"></i>Github <i class="fa fa-cogs fa-fw"></i>設定
Color Icons
アイコンの色を制御します。これはHTMLの中に「css」を埋め込んでいるだけです。
<i class="fa fa-android" style="color:#A4C639;"></i>
Animated Icons
アイコンを動かします。待機中（Loading）などに便利です。「fa-spin」だと滑らかに回転、「fa-pulse」だとカクカクに回転します。
<div class="fa fa-spinner fa-spin"></div> <div class="fa fa-circle-o-notch fa-spin"></div> <div class="fa fa-refresh fa-spin"></div> <div class="fa fa-cog fa-spin"></div> <div class="fa fa-refresh fa-pulse"></div> <div class="fa fa-spinner fa-pulse"></div>
Rotated & Flipped Icons
アイコンが傾きます。それぞれ90度傾き、180度傾き、270度傾き、傾きなし、ひっくり返しです。
<div class="fa fa-shield"></i> <div class="fa fa-shield fa-rotate-90"></div> <div class="fa fa-shield fa-rotate-180"></div> <div class="fa fa-shield fa-rotate-270"></div> <div class="fa fa-shield fa-flip-horizontal"></div> <div class="fa fa-shield fa-flip-vertical"></div>
以上、5種類のアイコン制御方法の紹介でした。次のサイトFont Awesome Iconsでアイコン制御方法をWEB上にアップしてくれています。記事で取り上げたアイコン制御の他にもたくさんの制御方法があります。気になる方はサイトの Example タブから確認してみてください。
fontawesome.com
