Web制作
Webアイコンフォント「Font Awesome 5」の使い方【簡単】
2019年03月05日 8:00
おはようございます！社員Aです👩
今回は、Webアイコンフォントで定番の「Font Awesome 5」の使い方について、徹底解説していきたいと思います！
もくじ
Webアイコンフォントとして有名なFont Awesome 5
Webアイコンフォントと言えば「Font Awesome」と言われるほどWEB業界ではよく使われていますよね。
導入から表示までがとっても簡単なので、私も制作の際はほぼ全案件で使っているくらい重宝しています。
今回はその「Font Awesome」を初めて使う方に向けて、解説していきたいと思います！
Webアイコンフォントについて
フォントとして使用することができるアイコン素材のことを、Webアイコンフォントと言います。
例えば、メールや電話などのアイコンも画像として出さずにフォントとして表示することができるので、フォントと同様にサイズや色変更などCSS上で簡単に扱えるのがメリットです。
FontAwesome 5の使い方
ここからは、早速FontAwesomeの使い方を解説していきたいと思います。
1.FontAwesomeをサイトに読み込む
まずは、FontAwesomeをサイトに読み込みましょう。サイトに読み込む方法は2種類ありますので、お好きなやり方で導入してください。
- CDNコードを使用してサイトに読み込む
- ファイルをダウンロードして、サイトに読み込む
CDNを使用してサイトに読み込む方法
公式サイトにCDNが公開されていますので、コピペして<head></head>間に貼り付けましょう。
CDNを使用するときの注意点FontAwesomeでは頻繁にアップデートが行われていますので、古いCDNを読み込んでいた場合アイコンが表示されない場合があります。
特に2018年にFont Awesome 4から5にアップデートされていますので、この関係で表示されていない可能性もあります。
公式サイトで常に最新のCDNが更新されていますので、もし古いCDNを読み込んでいる方は公式サイトで公開されているCDNで貼り替えてみてください。
ファイルをダウンロードして、サイトに読み込む
先程の「Start a New Project」のページの下部にスクロールすると、「Download」という項目がありますのでクリックしてダウンロードしましょう。
ダウンロードが終わったら、サイトに読み込みます。
2.使いたいアイコンを探す
Font Awesomeをサイトに導入したら、早速アイコンを探してみましょう。
最初にFree（無料版）で絞り込む
Font Awesomeには無料版と有料版のアイコンがあります。
検索をした時に最初は無料アイコンと有料アイコンが混在した形で表示されますので、サイドメニューで「Free」を選択して無料版のみに絞り込みましょう。
プロ版の契約をしていないのに有料アイコンを貼り付けても、当然ですが表示されません。
カテゴリからアイコンを探す
サイドメニューにカテゴリ分けされているので、カテゴリから探したいときはクリックしてみましょう。
検索ワードでアイコンを探す
使いたいアイコンがざっくり決まっていれば、検索ワードで探してみましょう。日本語には対応していないので、英語での検索が必要です。
よく使う「Menu」や「Telephone」「Arrow」でも引っ掛かりますし、難しい単語であればGoogle翻訳で翻訳して検索すれば大体引っかかります！
3.アイコン詳細ページからコードをコピー
使いたいアイコンの詳細ページを開いたら、最上部に情報がまとまっています。
その中の<i> </i>の部分をクリックしてコピーしましょう。
この部分からSVGなどもダウンロードできます！
4.コピーしたコードをサイトに貼り付ける
先程コピーした<i> </i>の部分をサイトに貼り付けましょう。
下記のようなイメージです。
ソースコード
<i class="fas fa-apple-alt"></i> りんご
表示
りんご
5.CSSなどで色やサイズを整える
FontAwesomeはフォントアイコンのため、フォントと同様に色やサイズを整えることが出来ます。
ソースコード
<i class="fas fa-apple-alt"></i> りんご
i{
font-size: 18px;
color: red;
}
表示
りんご
上記のように、簡単に色やサイズを整えることができます。
:beforeや:afterなどの疑似要素にFont Awesomeを使う方法
Font Awesomeのアイコンは、テキスト上だけでなく、CSSの疑似要素「:before」や「:after」などの疑似要素にも使用できます。
次の方法で簡単に挿入できます。
1.アイコン詳細ページからコードをコピー
先程は、<i> </i>のコードをコピーしてきましたが、疑似要素に使用する場合は下記の部分をコピーします。
2.疑似要素でFont Awesomeを指定
div:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "f5d1";
}
下記のポイントを守って指定することで、疑似要素に指定できます。
- font-family部分に、「”Font Awesome 5 Free”」を指定
- content部分に1でコピーしたコードを貼り付ける
疑似要素に指定することで、ボタンや、リストの先頭などに簡単にアイコンをつけることができるのでとても便利です！
Font Awesomeが表示されない？そんなときの解決法
今回の記事で、Font Awesomeの導入方法を解説していきましたが、たまにアイコンが表示されないということがあります。
下記記事で「Webアイコンフォント「FontAwesome 5」が表示されないときの原因と対処法」をまとめていますのでぜひご覧ください！
主な原因は、CDNバージョンや貼付け位置・CSSでFont Awesomeを使用している場合などです。
まとめ
Webアイコンフォントで定番の「Font Awesome 5」の使い方を解説しました。
CDNで手軽に導入できる点と、フォントと同様にCSSでデザインが扱いやすい点から、人気があります。
ホームページだけでなくても、<head> </head>間が編集できるブログやECショップなどでも活用できるかと思います！
関連記事
この記事を書いた人
社員A
入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺
