概要
- Font Awesomeはweb等で使用できるアイコンを提供してくれるサービス。
- Font Awesomeのアカウント作成法と簡単な使用法を説明する。
アカウントを新規に作成して、アイコンを使用する。
Font Awesomeをブラウザで開き、「Start for Free」をクリック
↓
メールアドレスを入力して、「Send Kit Code」をクリック
↓
メールが届くので、「Confirm Your Email Address」をクリック
↓
ブラウザが開くので、パスワードを入力して、「Set Password & Continue →」をクリック
↓
姓名、使用開始年、お気に入りアイコンを入力して「All set. Let’s go! →」をクリック
または
「No thanks. Let’s skip this step for now」をクリック
↓
①にスクリプトが表示されるので、「Copy Kit Code!」をクリックしてコピー
↓
コピーしたスクリプトをhtmlファイルの<head>と</head>の間にペースト
↓
②の検索窓で、例としてdogを検索すると犬に関連するアイコンが表示されるので、どれかをクリック
↓
右上にHTMLのコードが表示されるので、クリックしてコピー
↓
コピーしたスクリプトをhtmlファイルの<body>と</body>の間にペースト
ここまでの作業を行ったindex.htmlの例を以下に示す。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sample of index.html</title>
<script src="https://kit.fontawesome.com/xxxxx.js" crossorigin="anonymous"></script> <!-- xxxxxはアカウントごとに異なる -->
</head>
<body>
<p>Hello ICON!</p>
<p><i class="fa-solid fa-dog"></i></p> <!-- 犬のアイコンを挿入 -->
</body>
</html>
既存のアカウントで、アイコンを使用する。
Font Awesomeをブラウザで開き、右上の「Sign In」をクリック
↓
メールアドレスとパスワードを入力して、「Sign In」をクリック
↓
「Your Kits」をクリック」
↓
左上に表示されているKit Code（例えば、1a2b3c45deなど英数字のコード）をクリック
↓
①にスクリプトが表示されるので、「Copy Kit Code!」をクリックしてコピー
↓
コピーしたスクリプトをhtmlファイルの<head>と</head>の間にペースト
↓
②の検索窓で、例としてdogを検索すると犬に関連するアイコンが表示されるので、どれかをクリック
↓
右上にHTMLのコードが表示されるので、クリックしてコピー
↓
コピーしたスクリプトをhtmlファイルの<body>と</body>の間にペースト
ここまでの作業を行ったindex.htmlの例を以下に示す。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sample of index.html</title>
<script src="https://kit.fontawesome.com/xxxxx.js" crossorigin="anonymous"></script> <!-- xxxxxはアカウントごとに異なる -->
</head>
<body>
<p>Hello ICON!</p>
<p><i class="fa-solid fa-dog"></i></p> <!-- 犬のアイコンを挿入 -->
</body>
</html>
アイコンのスタイルを変更する。
アイコンのサイズを変更する。 ※こちらを参考にした。
<p><i class="fa-solid fa-dog fa-2xl"></i></p> <!-- アイコンを大きくする -->
アイコンに動きを与える。 ※こちらを参考にした。
<p><i class="fa-solid fa-dog fa-flip"></i></p> <!-- アイコンを反転させる -->
ここまでの作業を行ったindex.htmlの例を以下に示す。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sample of index.html</title>
<script src="https://kit.fontawesome.com/xxxxx.js" crossorigin="anonymous"></script> <!-- xxxxxはアカウントごとに異なる -->
</head>
<body>
<p>Hello ICON!</p>
<p><i class="fa-solid fa-dog"></i></p> <!-- 犬のアイコンを挿入 -->
<p><i class="fa-solid fa-dog fa-2xl"></i></p> <!-- アイコンを大きくする -->
<p><i class="fa-solid fa-dog fa-flip"></i></p> <!-- アイコンを反転させる -->
</body>
</html>