こんにちは朱夏です。
今回は、Font Awesomeを使ってみたいと思います。
Font Awesomeは無料でも使えるアイコンフォントツールです。
TwitterやYouTubeなどのアイコンもあるので、リンクアイコンなどに使うと便利です。
それではやっていきましょう。
[もくじ]
導入準備
使い方
良く使うアイコン
あとがき
導入準備
使い方
良く使うアイコン
あとがき
導入準備
初めに導入方法です。
Font Awesomeを導入するには、以下のサイトからアカウントを作成してください。
アカウントを作成したら、プランを選択します。
初めのプランはFree（無料版）にしましょう。
Free（無料版）には以下の制限がかかっています。
- 利用可能サイト1つ
- 一部のアイコン使用不可
あと、Free（無料版）はPV1万以下のサイトのみ利用可能な様です。
プランを決めたら、HTMLに貼り付けるコードを取得しましょう。
これで準備完了です。
使い方
アイコンを使用するには、以下の3ステップで簡単に使えます。
- 取得したコードをHTMLの<head>タグに貼り付け
- Font Awesomeのサイトから、利用したいアイコンを検索
- アイコンを表示させたい場所にアイコンのコードを貼り付け
表示サンプルは以下になります。
See the Pen
mdJQbNM by 朱夏 (@syunatsu1)
on CodePen.
こんな感じでテキストと同じ様にフォントサイズや色を変更する事が可能です。
良く使うアイコン
良く使うアイコンのコードを以下に紹介します。
Twitter：<i class=”fab fa-twitter”></i>
Facebook：<i class=”fab fa-facebook-square”></i>
Instagram：<i class=”fab fa-instagram”></i>
YouTube：<i class=”fab fa-youtube”></i>
メニュー：<i class=”fas fa-bars”></i>
SNSのアイコンと、スマホメニューボタンで使用する三本線のコードになります。
使うことが多いアイコン化と思いますので、メモしておくのもありかも知れません。
あとがき
今回は、Font Awesomeを使ってみました。
無料のアイコンだけでも使えるものがいくつもあるので、お試しで使ってみるのもありだと思います。
今回は以上です。
次回もよろしくお願いします。
