2020年1月22日BootstrapのYouTube動画でLPを作成していますが、FontAwesomeを使うことがあり、手が止まってしまいました。今回は、何かと使うことが多い、FontAwesomeの使い方についてまとめておきたいと思います。HTMLファイルを貼り付けるFontAwesomeとは?FontAwesome(フォントオーサム)というWebアイコンをフォントとして表示してくれるサービスのことです。以下のアイコンは、FontAwesomeで作成していて、SNSアイコンなどによく使われています。CodePen.実際にやってみると実装は本当に簡単です。事前準備から解説していきましょう。FontAwesomeの事前準備すぐにWebフォントをかける訳ではなく、ちょっとした準備が必要です。言っても、コピペするだけなので簡単ですが、仕組みは理解しておく必要があるかなーと思います。CDNを使ってフォントを読み込むCDNは、FontAwesome上にあるアイコンにを読み込んで、Webサイトに表示させる仕組みで、リンクの読込先をFontAwesomeのサーバー上に設定しておきます。rel="stylesheet">このコードをコピーして、</head>の直前に貼り付けます。これで事前準備は完成です。使いたいフォントを探しにいきましょう。FontAwesomeのサイトからフォントを選ぶFontAwesomeのサイトから欲しいアイコンを検索し、クリックします。アイコンをクリックすると、上部にHTMLコードが記述されているので、それをコピー。CodePen.あとは、好きなところに貼り付ければOK、簡単ですね。フォントとして認識されているので、font-sizeやcolorで大きさや色を変えることができるのが嬉しい。クラス名に「fa-2x」「fa-fw」とつけると、2倍の大きさにして前後に余白を入れる設定にすることができます。そのほか、詳細な設定はサルワカさんのブログが参考になります。簡単ですが、頻出コードなのでよく覚えておこう。あと、SNSアイコンの色についてはWEBPARKさんの記事が参考になりましたので載せておきます。BlogスポンサーリンクスポンサーリンクSearchWebコーダーKohei8年勤めた職場を退職し、完全未経験からWebコーダーに転職しました。