Twitterでブログ更新情報を配信中

Font Awesome 5のアイコンをCDNとダウンロードデータで指定してブラウザに表示

ユーザーに伝わりやすいWebサイトにしたいとき、簡単、無料で利用できるイラストがあると嬉しいですよね。画像以外にも、Webアイコンフォントを使うと、ひと目で分かるフラットなデザインが実装できるのでおすすめです!

よく使われる有名なものとして、Font AwesomeMaterial Iconsなどがあります。今回ご紹介する「Font Awesome」はプロ版の契約で常時7,000種類、無料であっても1,500種類以上のアイコンから選ぶことができます。

Webサイトの表示はもちろん、実はイラストレーター上でデザインに利用することもできますよ!

Font Awesome 5のアイコンをIllustratorやXDで使う方法!UIデザインにおすすめ!

それでは、データをダウンロードする方法と専用サーバーにアクセスする方法の2つを順に解説していきます。

Font Awesomeの使い方

Font Awesomeの設置方法は、2つあります。

  1. データをダウンロードして使う方法
  2. CDNという外部サーバーに接続して使う方法

いずれの場合もheadタグ内に読み込むための記述をする必要があります。どちらかと言えば、2の手順の方がダウンロードしたデータの設置がない分、導入は簡単です。

また、Font Awesomeをブラウザで表示するには、HTMLもしくはCSSのいずれかの方法が一般的です。事前準備のあとに2つの方法をご紹介していきますね。

事前準備

ダウンロードしたデータを設置する場合

ダウンロードする場合、まずはFont Awesomeの公式サイトにアクセスします。Start for Freeをクリック。

Font Awesomeの公式サイト

Downloadをクリックします。

Downloadメニューを選択

Download Font Awesome Free for the Webをクリックします。

データをダウンロード

ダウンロード完了後、ファイルを展開します。cssフォルダをクリック。

データからcssフォルダを選択

all.cssもしくはよりコンパクトなall.min.cssファイルを使っていきます。その他のbrands、regular、solidはアイコンのスタイル名で、allにすべて含まれています。

all.cssを選択

サーバーのcssディレクトリなど、読み込む階層に合わせて設置しましょう。今回はfontフォルダにall.css、cssフォルダにstyle.cssを配置した状態で進めていきます。

cssディレクトリに設置

head内の記述は他のcssと読み込ませ方は同じです。

<!DOCTYPE html>
<html>
<head>
<link rel ="stylesheet" href="css/style.css">
<link rel ="stylesheet" href="font/all.css">
<title>Font Awesomeの練習</title>
</head>
</html>

CDNで読み込む場合

データをダウンロードしない場合の方法はこちらです。GitHubのページにアクセスし、最新のCDNファイルをコピーします。

GitHubのページでCDNコードをコピー

コピーしたコードをhead内にペーストします。 先ほどのダウンロードデータを読み込んでいた、all.css部分が変わります。

<!DOCTYPE html>
<html>
<head>
<link rel ="stylesheet" href="css/style.css">
<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
<title>Font Awesomeの練習</title>
</head>
</html>

ブラウザに表示するには

いずれかの方法で読み込ませたら、htmlもしくはcssで表示させていきます。予め公式サイトのIconsから一覧ページを開き、Freeにチェックを入れておきましょう。

ちなみに検索ボックスは英語のみとなります。

公式サイトでアイコンを検索

HTMLで表示

赤枠部分をクリックしてコピーします。

html用のコードをコピー

HTMLファイルの</head>以降にペーストします。

<body>
<section>
<i class="fab fa-twitter"></i>
</section>
</body>

CSSプロパティを下記の通り指定するとより見やすくなりますよ。

@charset = 'utf-8';
body{
background-color: #f5f5f5;
}
/中央寄せ/
section{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform : translate(-50%,-50%);
transform : translate(-50%,-50%);
width: 100px;
}
/アイコン/
.fa-twitter{
font-size: 100px;
color: #00acee;
}

ブラウザ表示を確認してみましょう。

完成

CSSで表示

赤枠部分をコピーします。

css用のコードをコピー

HTMLを </head> 以降にペーストしましょう。

<body>
<section>
<div class="icon"></div>
</section>
</body>

CSSプロパティを下記の通り指定するとより見やすくなりますよ。 アイコンのcontentプロパティには半角のバックスラッシュを入れる点に注意してください。

@charset = 'utf-8';
body{
background-color: #f5f5f5;
}
/中央寄せ/
section{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform : translate(-50%,-50%);
transform : translate(-50%,-50%);
width: 100px;
}
/アイコン/
.icon::before{
content: '\f099';
font-family: 'Font Awesome 5 Brands';
display: inline-block;
color: #00acee;
font-size: 100px;
}

ブラウザ表示を確認してみましょう。

完成

表示されないときは

指定に誤りがある場合は四角が表示されます。よくある原因として下記2点を確認し、様子を見てくださいね。

  • 使っているアイコンのスタイル
  • 読み込んでいるFont Awesomeのバージョン
アイコンスタイルの確認

無料で使えるアイコンのスタイルは全3種で、Solid、Regular、Brandsに分けられます。Solidは、font-weight : 900; を、Regularは、font-weight: 400;と文字の太さの指定が必要になります。合わせて、font-familyには、font-family: ‘Font Awesome 5 Solidのようにスタイル名も記述してくださいね。

つづいて読み込んでいるFont Awesomeのバージョンが4.〇.〇のように、5以前のものになると、使えるアイコンの種類やCSSプロパティが「font-family : FontAwesome;」となるなど仕様がやや変わります。

今回はWebアイコンフォントでよく使われるFont Awesomeの導入方法をご紹介しました。読み込み方はCDNもしくはダウンロードデータで、ブラウザ表示にはHTMLもしくはCSSで、と組み合わせにより使い方はさまざま。制作時間、指定のしやすさを考えて、自分に合う方法で取り入れていきましょう!

この他にもSVGというダウンロードデータもありますし、アニメーション用のCDNを追記すると、動きのあるユニークな演出ができるようになりますよ。遊び心を加えたいときにぜひ利用したいですね!