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 | <!DOCTYPE html> |