最終更新日：
公開日：
レシピ
フォント
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プロパティで設定します。
以上が、基本的な使い方になります。
アイコンは本当にたくさんの種類があるので、もし興味があったら眺めてみてください。