Font Awesomeを確実に読み込んでブラウザに表示させる方法
HTML / CSSでwebサイトを作っている時に、アイコンを使用したくなることがあるかと思います。
そんな時便利なのが、Font Awesomeです。
しかし、英語で書かれているので、使う時に少し戸惑ってしまうかも知れません。
そこで、Font Awesomeの読み込み方について解説していきます！
- Font Awesomeの例
- 手順①：公式サイトにアクセスする
- 手順②： Start for Freeをクリックする
- 手順③：メールアドレスを入力して、Send Kit Codeをクリックする
- 手順④：パスワードと必要事項を記入する。
- 手順⑤：Kit Codeをコピーして、htmlファイルのheadタグ内に貼り付ける
- 手順⑥：使いたいアイコンを検索して、クリックする。
- 手順⑦：HTMLをコピーして、自身のhtmlファイルに貼り付ける。
- 最後に
Font Awesomeの例
Twitterでも使われていると思います。
手順①：公式サイトにアクセスする
にアクセスしましょう！
手順②： Start for Freeをクリックする
まずは無料で始めてみましょう！
手順③：メールアドレスを入力して、Send Kit Codeをクリックする
emailの内容を確認します。
Click to Confirm Your Email Address + Set Things Upをクリックします。
手順④：パスワードと必要事項を記入する。
必要事項を記入して、
All set.Let's go!をクリックします。
一番下では、「お気に入りのアイコンは何ですか？」と聞かれていますが、"dog"などの簡単な英単語を入れておけばいいでしょう。
手順⑤：Kit Codeをコピーして、htmlファイルのheadタグ内に貼り付ける
親切にどこに貼り付ければいいかが、右下に示してあります。
手順⑥：使いたいアイコンを検索して、クリックする。
濃いアイコン(無料枠で使用できるアイコン)をクリックします。
手順⑦：HTMLをコピーして、自身のhtmlファイルに貼り付ける。
最後に
他にも方法はあるみたいですが、今回紹介した方法が確実なのではないかと思います。
アイコンがあると一気にwebサイトらしくなるので、ぜひ使ってみてください。
