ちょっとディープな生物の世界

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

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

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

2. <head>内にコードを貼る

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

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

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

3. 使いたいアイコンを検索してコードを貼る

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

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

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

4.大きさ・色を指定する

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

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です