【保存版】FontAwesomeの使い方|初心者向け!ダウンロードから徹底解説【webデザイン】

fontawesomeのトップページの様子 ウェブデザイン
スポンサーリンク

webデザインにかかせないSVGアイコン。

沢山のアイコンが無料でダウンロードできる、非常に便利なサイト「Font Awesome」の使い方を紹介します。

 

スポンサーリンク

そもそもFont Awesomeとは

web上で使用できるアイコンを画像ではなく、文字(コード)として使用することができるサービスです。
いわゆるSVG形式の画像です。

SVG形式のアイコンをダウンロードして、webデザイン制作にも使用できますし、サイトからコードを取得することも出来ます。
無料のアイコンから有償のアイコンまであります。

SVGについてはこちらの記事もご覧ください。↓

【初心者向け】現役デザイナーが教えるウェブデザイン制作の基本まとめ【独学でウェブデザイナー】
現役デザイナーがwebデザイン制作の基本をまとめて紹介します。ウェブデザインを独学で勉強している方や初心者の人が見落としがちな重要なポイントも網羅して、しっかり解説します。現場で使える知識なので、覚えておくといざ現場で働くことになってもすぐに活躍できるナレッジです。

 

コードでアイコンを表示できる利点は、大きさや色などをCSSで変更できる点にあります。
また、拡大・縮小しても画質が劣化しない点がメリットです。

 

Font Awesomeの使い方

Font Awesomeの公式サイトはこちら↓

Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

 

トップページはこんな感じです↓

fontawesomeのトップページの様子

 

SVGアイコンをダウンロードする

まず、webデザインで使用できるように、ダウンロードの方法を紹介します。

 

1.トップページ上部のメニューから「Icons」をクリックします。

「icons」をクリックする

 

 

2.任意をアイコンを選択し、クリックします。
※このとき、薄い灰色で表示されているアイコンは有償なので、注意しましょう。

任意のアイコンを選択する

 

 

3.「Download SVG」と表示される、ダウンロードアイコンにカーソルを持っていき、クリックする。

download svgと表示されるアイコンをクリック

 

 

4.利用規約が出てくるので、「Agree&Download the SVG」ボタンをクリックする。

これで、SVGアイコンがダウンロード出来ます。

 

「Agree&Download the SVG」ボタンをクリックする

 

 

ダウンロード手順まとめ

  1. トップページ上部のメニューから「Icons」をクリックする。
  2. 任意をアイコンを選択し、クリックする。
  3. Download SVG」と表示される、ダウンロードアイコンにカーソルを持っていき、クリックする。
  4. 利用規約が出てくるので、「Agree&Download the SVG」ボタンをクリックする。

 

HTMLコードを取得(コピー)する

アイコン詳細画面のコードをクリックすると自動でコードをコピーすることが出来ます。

これをHTMLの任意の場所にペーストすればOKです!

コードをクリックすると自動でコピーできます

 

 

CSSでFont Awesomeを表示させる方法

先ほどはHTMLでアイコン表示させる方法を紹介しました。

CSSでもFont Awesomeの表示が可能です。

CSSで表示する際は、「before擬似要素」と「after擬似要素」を使う場合が多いです。

 

前準備:CDNを使う

CDNとは、専用のサーバー常にあるフォントや画像データを読み込んで、サイトに表示させる仕組みです。利点としては、webサイトのデータが軽くなる点が挙げられます。

CDNのリンクが掲載されているページはこちら

↑上記のURLから、「Load All Styles」という見出しのlinkタグをコピーして、HTMLのheadタグ内に貼り付けてください。

CDN

 

↓下記コードをコピーしても大丈夫です!

<linkrel=”stylesheet”href=”https://pro.fontawesome.com/releases/v5.10.0/css/all.css”>
※随時、最新のバージョンが更新されていますので、過去のコードを使い回す時は注意しましょう。

 

CSSでの表示例

1.HTMLに下記コードを記述します。

<p>これは<span class=”apple”></span>リンゴです。</p>

今回はspanタグの部分に、リンゴのアイコンが表示されるようにコーディングします。

 

2.CSSを指定します。

.apple:before{
content: “\f5d1”;
font-family: “Font Awesome 5 Free”;
font-weight: 900;
}

上記のコードが、アイコンを表示するのに必要最低限のセレクタになります。

詳しく紹介していきますね。

 

content

content」には、アイコン詳細ページの上部に表示される文字列を記述します。↓

contentに入れるコード

このとき、\(バックスラッシュ)を文字列の前につけるのを忘れないように注意しましょう。

バックスラッシュ入力方法
MACの場合:optionキーを押しながら、¥キーを押す。

 

font-familyとfont-weight

font-family」と「font-weight」は使うアイコンによって指定が変わります。↓

fontawesomeのCSS指定表

上記のh表が掲載されているページはこちら

 

肝心の表の見方について。
アイコンの詳細ページで、アイコンのstyleが何なのかを確認することができます。↓

アイコンのスタイル確認

今回使用するアイコンは「Solid Style」と書いてあります。
なので、表の「Solid」部分が該当することが分かります。

 

weightとfamilyの指定

@font-face weight」が「font-weight」にあたりますので、ここに表示されている「900」を指定すれば良いです。

また、「@font-face font-family」が「font-family」に該当しますので、同様に、ここに表示されている文字列を指定すれば良いです!

 

まとめ

webデザイン制作で、フェイスブックやツイッターのアイコンなども配置すると思いますが、基本的に今回紹介したFont Awesomeを使用することが多いです。

SVGはデータが軽いことやCSSで大きさ、色なども変更できるので、覚えておきましょう!

 

WEBデザインに関するおすすめの記事はこちら↓

【初心者向け】現役デザイナーが教えるウェブデザイン制作の基本まとめ【独学でウェブデザイナー】
現役デザイナーがwebデザイン制作の基本をまとめて紹介します。ウェブデザインを独学で勉強している方や初心者の人が見落としがちな重要なポイントも網羅して、しっかり解説します。現場で使える知識なので、覚えておくといざ現場で働くことになってもすぐに活躍できるナレッジです。
タイトルとURLをコピーしました