アイコンの基本的な使い方をはじめ、Webサイトやスマホアプリでアイコンを使う時の便利な機能をまとめて紹介します。Patrik下記は各ポイントを意訳・加筆したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。Awesomeは多くの人が知っており、毎日使っている人もいると思います。AwesomeはWebサイトやスマホアプリ用の素晴らしいアイコンライブラリで、さまざまなスタイルの数千ものアイコンが利用できます。Awesomeここで紹介するアイコンはSVGですが、心配しないでください。SVGについての知識は必要ありません。Awesomeのアイコンには、4つのスタイルがあります。SolidRegularLightDuotoneBrandsSolidとBrandsのほとんどのアイコンは無料で利用できますが、他の3つのスタイルはプロ版(有料)です。アイコンを使用するには、登録(無料)が必要です。下記ページにアクセスし、登録をします。Free」をクリックして、メールアドレスを入力します。Confirm」をクリックして認証をします。認証が完了すると、パスワードの設定です。続いて、名前を登録します。Awesomeへの登録は完了です。Awesomeを使用するためのコードが発行されるので、コピペして利用できます。アイコンを使用するHTMLに下記のコードをコピペして利用してください。--></body></html>コードは自分のアカウントページからいつでも再発行・再生成でき、新しく作成することもできます。アカウントページアイコンを使用する時の基本書式を見てましょう。fa-[アイコンの名前]"></i>アイコンを配置するにはiタグを使用し、classで使用するアイコンを指定します。Awesomeの基礎知識はこれだけです。Awesomeが提供する本当に便利な機能を紹介します。Awesomeではclassで指定するだけで、アイコンのサイズも簡単に変更できます。サイズ用のCSSを記述したり、アイコンを修正する必要はありません!実際にやってみましょう。アイコンのサイズ指定は、classを加えるだけです。fa-10x"></i>このコードで下記のアイコンを実装できます。アイコンのサイズ変更アイコンをサイズ変更する.fa-#xは、2-10の値を利用できます。各classのフォントサイズは、下記の通りです。リスト用のアイコンリスト要素のビュレットをアイコンにするのも簡単です。ul要素に.fa-ulを加え、アイコンを.fa-liのspan要素で内包します。lists</li></ul>このコードで下記のアイコンを実装できます。全部同じアイコンにすることも、全部異なるアイコンにすることもできます。AwesomeではCSSのtransformプロパティを使用せずに、アイコンを回転・反転させることもできます。fa-flip-both"></i></div>回転する角度は.fa-rotate-#、水平・垂直の反転は.fa-flip-#で指定します。アイコンを水平・垂直に反転このコードで下記のアイコンを実装できます。Awesomeのアイコンはclassを加えるだけで、スピン(.fa-spin)やパルス(.fa-pulse)などのアニメーションをアイコンに与えることもできます。fa-pulse"></i>このコードで下記のアイコンを実装できます。Awesomeのアイコンは重ねて使用することもできます。親要素に.fa-stackを加え、重ねたいアイコンを通常通りに配置するだけです。fa-inverse"></i></span>このコードで下記のアイコンを実装できます。Awesomeが必要です。スケーリングは親要素に影響を与えることなく、アイコンのサイズを変更します。.shrink-#を使用し、小数を含む任意の値を定義できます。style="background:MistyRose"></i></div>このコードで下記のアイコンを実装できます。配置は親要素に影響を与えることなく、アイコンの位置を調整できます。.right-#を使用し、小数を含む任意の値を定義できます。CSSの絶対配置のような感じですね。style="background:MistyRose"></i></div>このコードで下記のアイコンを実装できます。アイコンのマスクこの機能は「アイコンを重ねる」と同様に、2つのアイコンを1つにまとめることができます。style="background:MistyRose"></i></div>このコードで下記のアイコンを実装できます。アイコンのマスク以下の2つのアイコンを1つにまとめています。fa-pencil-alt"></i>classには上記の例に従って、内側のアイコンは.fasと.fa-pencil-altです。data-fa-mask属性には外側のアイコンのclassを指定します。この場合は、.fasと.fa-commentです。アイコンの上にテキストを配置することもできます。アイコンを.fa-layersのspan要素で内包し、テキストは.fa-layers-textのspan要素で内包します。style="font-weight:900">NEW</span></span>このコードで下記のアイコンを実装できます。アイコンの上にカウンターを配置アイコンに数字のカウンターを追加することもできます。受信したメッセージの数を封筒アイコンに表示させたい時などです。アイコンの上にテキストを配置とほぼ同じで、.fa-layers-textの代わりに.fa-layers-counterを使用します。style="background:Tomato">1,419</span></span>このコードで下記のアイコンを実装できます。アイコンの上にカウンターを配置カウンターはデフォルトで右上隅に配置されますが、他の場所に配置することもできます。.fa-layers-top-left、およびデフォルトの.fa-layers-top-rightで配置でき、オーバーフローテキストは省略記号で切り捨てられます。