【簡単な】Font Awesomeの導入方法
とても便利なFont Awesomeは多くのブロガー・WEBデザイナーに使われていると思います。実際にこのブログでも色々な箇所で使っています。
そこで今回は備忘録も兼ねてFont Awesomeの使い方をまとめておきたいと思います。CDNを使うため初心者でも簡単に導入できるので、試してみてください。
Font Awesomeとは
WEBサイトやブログでアイコンを無料で使えるツールです。Font Awesomeのアイコンは画像と違いWEBフォントとして扱えるので、HTMLに組み込んだりサイズや色などをCSSで調整することができます。
koblogのタイトル・ヘッダーに使っているアイコンもFont Awesomeを使っています。 (前のデザインです)
導入方法
Font Awesomeは使う前に導入の準備をする必要があります。CDNや自分のサーバーにアップロードするなど導入方法はいくつかありますが、今回は一番簡単なCDNを使う方法を紹介します。
CDNを使う
CDNとはツールなどのコンテンツを自分のサーバーにアップロードせずに使えるようにする仕組みのことです。
アップロードをする必要がないので、はてなブログなどの無料ブログやサーバーに負荷をかけたくない人にオススメです。
CDNで読み込むには以下のコードを<head>〜</head>
の中に入れます。
これで準備完了です。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
Font Awesomeの使い方
使いたいアイコンを探す
準備ができたら、アイコン一覧から使いたいアイコンを探します。「icons」を選ぶとアイコン一覧に飛べます。
薄く表示されているのはプロ会員限定のアイコンなので、フリー会員の人は黒く表示されているアイコンの中から探します。左のサイドバーから絞り込みができるので「Free」などで絞ると見つけやすいかもしれません。
使いたいアイコンがあったらクリックして選択します。すると下のような画面に変わるのでHTMLで使う場合は赤枠で囲った<i class~></i>
のコードをコピーします。CSSで使う場合は赤枠の左にある4桁の英数字をコピーします。(クリックするだけで自動でコピーされます)
// HTMLの場合
<i class="fas fa-address-card"></i>
// CSSの場合
f2bb
コピーをしたら、使いたい場所にコードをペーストします。特別なCSSの編集は必要なく、HTML・CSSにコードを貼るだけでアイコンを表示させられます。