📚

【簡単な】Font Awesomeの導入方法

とても便利なFont Awesomeは多くのブロガー・WEBデザイナーに使われていると思います。実際にこのブログでも色々な箇所で使っています。


そこで今回は備忘録も兼ねてFont Awesomeの使い方をまとめておきたいと思います。CDNを使うため初心者でも簡単に導入できるので、試してみてください。

Font Awesomeとは

image1

WEBサイトやブログでアイコンを無料で使えるツールです。Font Awesomeのアイコンは画像と違いWEBフォントとして扱えるので、HTMLに組み込んだりサイズや色などをCSSで調整することができます。


koblogのタイトル・ヘッダーに使っているアイコンもFont Awesomeを使っています。 (前のデザインです)

image2

導入方法 

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」などで絞ると見つけやすいかもしれません。


image3


使いたいアイコンがあったらクリックして選択します。すると下のような画面に変わるのでHTMLで使う場合は赤枠で囲った<i class~></i>のコードをコピーします。CSSで使う場合は赤枠の左にある4桁の英数字をコピーします。(クリックするだけで自動でコピーされます)

 

// HTMLの場合
<i class="fas fa-address-card"></i>

// CSSの場合
f2bb

image4


コピーをしたら、使いたい場所にコードをペーストします。特別なCSSの編集は必要なく、HTML・CSSにコードを貼るだけでアイコンを表示させられます。






WEBデザインブログ「Koblog」の管理人。現役高校生。趣味は音楽鑑賞とネットサーフィン・読書。主にWEBデザイン・プログラミング・GatsbyJS・はてなブログ関連のことについて発信していきます。投げ銭をしてくれる方を募集しています。

donation