HTML & CSS

最終更新日:
公開日:

レシピ

フォント

Font Awesomeを使う

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

この記事のポイント

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

目次

Font Awesomeとは

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

Font Awesomeの使用例

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

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

Font Awesomeの無料アイコン一覧

Font Awesomeを使ってみる

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

  1. CDNのCSSを読み込む
  2. アイコンを選ぶ
  3. 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

Appleのロゴマーク

ページにある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プロパティで設定します。

CSSの適用例

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

Font Awesome