Font Awesomeを使う

「Font Awesome」の基本的な使い方を、コード例を交えながら解説します。

この記事のポイント

Font Awesomeについて知る
基本的な使い方が分かる

Font Awesomeとは

Font Awesomeは、絵文字のような感覚で使用できるアイコンです。
Font Awesome

アイコンはベクター形式なので拡大／縮小が自在で、しかも通常の文字と同様にfont-sizeプロパティやcolorプロパティを使用することができます。

無料版／有料版があり、無料版でも多くのアイコンを使用できます。
次の画像はアイコンの一例です。

Font Awesomeを使ってみる

基本的な使い方をご紹介します。
今回は無料版で進めていきますが、アカウント登録などは不要なので気軽に試してみることができます。
手順は次の3つ。

CDNのCSSを読み込む
アイコンを選ぶ
CSSを適用する

とっても簡単です。
それでは1つずつ解説していきます。

CDNのCSSを読み込む

まずは、CDN(Contents Delivery Network)で配信されているCSSを読み込みます。
次のURLからlink要素をコピーし、アイコンを読み込みたいHTMLのhead要素の中に貼り付けます。

Getting Startted – Font Awesome

コード例

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Awesomeを使う</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
</head>
<body>
</body>
</html>

アイコンを選ぶ

続いて、iconsページから読み込みたいアイコンを選びます。
icons – Font Awesome

今回はおなじみAppleのロゴマークを例に進めていきます。
appleロゴマーク – Font Awesome

ページにあるi要素をコピーしてHTMLに貼り付けます。

コード例

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Awesomeを使う</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
</head>
<body>
	<p><i class="fab fa-apple"></i></p>
</body>
</html>

ここまでで、とりあえずアイコンは表示されます。

CSSを適用する

最後に、読み込んだアイコンにCSSを適用して調整します。

コード例

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Awesomeを使う</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
<style>
p {
	margin: 0 auto;
	width: 100px;
	height: 100px;
	text-align: center;
	vertical-align: middle;
	line-height: 132px;
	background: #000;
}
i {
	color: #fff;
	font-size: 400%;
}
</style>
</head>
<body>
<section>
	<p><i class="fab fa-apple"></i></p>
</section>
</body>
</html>

アイコンはフォント同様に、表示サイズをfont-sizeプロパティで、色をcolorプロパティで設定します。

以上が、基本的な使い方になります。
アイコンは本当にたくさんの種類があるので、もし興味があったら眺めてみてください。

Font Awesome

こちらの記事は役に立ちましたか？

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます！
運営の参考にさせていただきます。