第1章 3節 Font Awesomeを導入しよう

Font Awesomeとは

とても有名なアイコンフォントで、以下のURLに公式サイトがあります。
https://fontawesome.com/

ご存知の方も多いと思いますが、アイコンフォントは、CSSのcolorプロパティで色を変更したり、font-sizeプロパティで大きさを変更したりできるためとても便利です。

CDNを使用してセットアップしよう

以下のSetup Webfont with CDNのページにならって、最も簡単な方法でセットアップしてみます。
Setup Webfont with CDN: https://fontawesome.com/how-to-use/customizing-wordpress/snippets/setup-cdn-webfont

以下のlinkタグを「第1章 - 0001」で作成したmodule-list.htmlの <link rel="stylesheet" href="../stylesheets/html5reset-1.6.1.css"> の下に追記してください。

1
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

Font Awesomeのクラスを使ってみよう

module-list.htmlのbodyタグ内に以下のタグを追記して、ブラウザで開いてみてください。

1
<i class="fas fa-cat"></i>

ねこのアイコンが表示されたら導入成功です。

Font Awesomeの公式サイトのiconsのページでアイコン一覧が確認できるので、どのようなアイコンがあるのかぜひ確認してみてください。

ここまでやった段階でのmodule-list.html

以下の通りです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>中野ピク氏流CSS設計</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../stylesheets/html5reset-1.6.1.css">
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
  <link rel="stylesheet" href="../stylesheets/module-list.css">
</head>
<body>
  <i class="fas fa-cat"></i>
</body>
</html>

続きはこちら

とてもやさしいCSS設計チュートリアルの目次へ戻る