HTML/CSS

【FontAwesomeの使い方】Webアイコンを簡単に実装

BootstrapのYouTube動画でLPを作成していますが、FontAwesomeを使うことがあり、手が止まってしまいました。
今回は、何かと使うことが多い、FontAwesomeの使い方についてまとめておきたいと思います。

FontAwesomeとは?

FontAwesome(フォントオーサム)というWebアイコンをフォントとして表示してくれるサービスのことです。
以下のアイコンは、FontAwesomeで作成していて、SNSアイコンなどによく使われています。

See the Pen
ydaZBz
by kei (@kei_01011)
on CodePen.


実際にやってみると実装は本当に簡単です。
事前準備から解説していきましょう。
 

FontAwesomeの事前準備

すぐにWebフォントをかける訳ではなく、ちょっとした準備が必要です。
と言っても、コピペするだけなので簡単ですが、仕組みは理解しておく必要があるかなーと思います。

CDNを使ってフォントを読み込む

CDNは、FontAwesome上にあるアイコンにを読み込んで、Webサイトに表示させる仕組みで、リンクの読込先をFontAwesomeのサーバー上に設定しておきます。

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

このコードをコピーして、</head>の直前に貼り付けます。
 
これで事前準備は完成です。
使いたいフォントを探しにいきましょう。
 

FontAwesomeのサイトからフォントを選ぶ

FontAwesomeのサイトから欲しいアイコンを検索し、クリックします。
 

アイコンをクリックすると、上部にHTMLコードが記述されているので、それをコピー。
 

HTMLファイルを貼り付ける

See the Pen
ydaZBz
by kei (@kei_01011)
on CodePen.


あとは、好きなところに貼り付ければOK、簡単ですね。
フォントとして認識されているので、font-sizeやcolorで大きさや色を変えることができるのが嬉しい。
 
また、クラス名に「fa-2x」「fa-fw」とつけると、2倍の大きさにして前後に余白を入れる設定にすることができます。
そのほか、詳細な設定はサルワカさんのブログが参考になります。
簡単ですが、頻出コードなのでよく覚えておこう。あと、SNSアイコンの色についてはWEBPARKさんの記事が参考になりましたので載せておきます。