2019/12/06FontAwesomeはWebサイトや、ブログなどで簡単にアイコンを表示させることができるサービスです。バージョンアップや仕様変更を経て、現在ではPRO版(有料)も用意されています。無料版でも15,44種類(2019年10月現在)のアイコンが用意され、世界中で多くユーザーが利用しています。最近ではFontAwesomeへのユーザー登録が必須となりましたので、改めて初心者にも分かりやすいようにFontAwesomeの使い方を紹介します。疑似要素で使用するFontAwesomeの使い方1アイコンフォント「FontAwesome」とは?アイコンフォントはWebフォントのアイコン版で、フォント同様にサイズ・色変更をCSSで調整することができます。以前のFontAwesomeではWebフォントはCSS、SVGはjavascriptで表示させてましたが、現在はJavaScriptのみでCSSかSVGを表示させる仕様となっています。有料のPRO版は$99(年間)で利用することができます。(2019年10月現在)PRO版は合計7,365のアイコンが使用することができ、アイコンの種類はSolid・Regular・light・Duotoneと4タイプ用意されています。アイコンの種類も豊富にあり、Free版でも1,544種類のアイコンから選択することができ、以下のようによく使用されそうなアイコンも数多く用意されてます。」ボタンをクリックします。Code」ボタンをクリックします。Up」をクリックします。表示されたページで、名前・パスワードを設定しユーザー登録完了です。3FontAwesome導入の準備ログイン後に各kitsページに記載されているJavaScriptをコピーし、アイコンを表示させたいサイトのhead内にリンクを貼り付けて準備完了です。crossorigin="anonymous"></script>SVGで表示させたい場合WebフォントではなくSVGで表示させたい場合は各Kitsページの右上にある「Settings」をクリックします。Changes」をクリックします。その他にSettingsではキット名・FontAwesomeのバージョンも変更することが可能です。SVGで表示させる場合はCSSの疑似要素は使えません。4FontAwesomeの使用方法FontAwesomeのIconsページから使用したいアイコンを探します。Free版で使用する場合は左メニューの「Free」をクリックすると検索しやすくなります。使用したいアイコンが見つかったらアイコン詳細ページからコードをコピーし、表示させたい箇所にコードをペーストします。fa-twitter"></i>5アイコンのカラーを変更するアイコンのカラーはCSSで簡単に変更することができます。</span></span>6アイコンのサイズを変更するFontAwesomeでサイズのclassが用意されているのでサイズを変更したい場合はclassにfa-xsfa-smfa-lgfa-2x~fa-10xを追加します。オリジナルのCSSを追加しfont-sizeでサイズを変更することもできます。-25%)fa-2x~fa-10x2em~10em7アイコンの向きを変更する角度のclassを追加することで角度(90°/180°/270°)反転(水平/垂直)を変更することができます。fa-flip-vertical"></i>fa-rotate-9090°fa-rotate-180180°fa-rotate-270270°fa-flip-horizontal水平(横)に反転fa-flip-horizontal垂直(縦)に反転8アイコンを回転させるローディングアニメーションで使えそうな回転するアイコンもclassにfa-spinを追加するだけで機能します。fa-pulseにすると、8ステップで1回転するアニメーションとなります。9アイコンを使ったメニューナビゲーションメニューもアイコンを配置するだけで視覚的にイメージが伝わりやすくなります。Mail</a></li></ul></div>10疑似要素で使用するCSSの疑似要素::before::afterでアイコンを表示させることもできます。CSS(Webフォント)FREE版での使用方法を紹介します。"\f099"を記述します。Unicodeは各アイコンページにてコピーできます。Brands";となります。各アイコンのfont-familyの記述は以下のようになってます。Free";の記述ではアイコンが表示されません。Pro";では問題なく表示されます。Pseudo-elementsは、しばらく更新されていないようです。以前のバージョンと比べ、機能が増えてだいぶ進化しているようですね。無料で簡単にアイコンを表示することができるので、興味のある人は使用してみてはいかがでしょうか。以上、アイコンフォント「FontAwesome」の使い方でした。