【FontAwesome】おしゃれなアイコン「FontAwesome」の使い方

1. FontAwesomeのアカウントを取得する

初めに、FontAwesomeのサイトに行き、アカウントを取得しましょう。メールアドレスがあれば作ることができます。

トップページの「Start Free」のボタンを押すと、キットを作成することができます。無料のアカウントならば、キットは１つのみです。

キットを作成すると、How to useのタブを開くと、コードをゲットすることができます。これを<head>タグ内に張り付けて準備完了です。

<script src="https://kit.fontawesome.com/キット名が入ります.js" crossorigin="anonymous"></script>

あとは適当に使いたいアイコンを検索します。好きなアイコンをクリックすると、コードが書いてあるため、それを貼り付けます。これだけで完了です。

<body>
<i class="fas fa-thumbs-up fa-5x"></i>
</body>

実際にはこんな感じになります。

FontAwesomeは文字として認識されているので、font-sizeで大きさを指定、colorで色を指定できます。

.fas{
 font-size:10px;
 color:#fff;
}