【超簡単】 Font Awesomeの使い方

Font Awesomeの使い方

インターネット上でよくこういうやつ見ますよね．

今回は、「Font Awesome」を利用して、このようなアイコンを実装する方法を説明します．

めちゃくちゃ簡単なの、是非読んでみてください．

本記事でわかること

Font Awesomeとは何ぞや，って感じだと思うので，一応そこから説明していきます．

Font Awesomeは、上で見せたようなアイコンなどを使うためのツールキットです。

まあ簡単に言うと、いろんなアイコンとか埋め込めれるぜ、ってやつです．

では、さっそく使い方を見ていきましょう．

ここでは、アイコンを使用するための準備を行います。

まず、Font Awesomeを使用する htmlファイルの headタグの中に、以下のコードをコピペしてください。

これを入力しないとFont Awesomeは使えませんので、注意してください。

上のコードをコピペしたら、Font Awesomeのアイコンを使えるようになります。

次のステップからは、実際にアイコンを使用する手順を説明します。

まず、公式サイトから使いたいアイコンを探していきます。

検索窓から適当に検索をしてみてください。

ここでは、試しに「twitter」と検索してみます。

検索すると、以下のような画面になります。

ここから使いたいアイコンをクリックします。

※PROと表示されているものは有料です

今度は以下のような画面になると思うので、「Copy HTML」 と書かれたところをクリックしてください．

あとは、コピーしたコードを、htmlファイル内のアイコンを使いたい箇所に張り付けるだけです。

ちなみに、【jQuery】パスワードを表示する機能の実装の記事で、パスワード入力欄の横にある目玉アイコンも、このFont Awesomeによるものです。

これでアイコンを使用することができます。

是非活用してみてください。