[ 補足 ] 外部Webアイコンサービス（fontawesome）の使用方法

このレッスンは飛ばして先に進んでも構いません。

本レッスンではBootstrapアイコン以外の、外部アイコンフォント（Font Awesome）の使い方を解説します。
使用には無料会員登録が必要が必要となります。必修ではありませんので、スキップしてBootstrap5講座の方をどんどん進めていただいてもOKです。

吉田先生

Bootstrapアイコン以外にも、Web上には手軽にアイコンを表示することができるサービスがいくつもあります。今回は、そのうちの１つ「Font Awesome」について見ていきましょう。

Bootstrapアイコン以外のアイコン

Bootstrapには拡張機能のBootstrapアイコンが用意されています。

それ以外にもWeb上にはWebアイコン、アイコンフォントを使えるためのサービスがたくさんあります。
Boostrapのドキュメントでも、自社サービス以外に３つの外部サービスが紹介されていますね。

出典：https://getbootstrap.jp/docs/5.3/extend/icons/

 

今回はこの中の1つ『Font Awesome』を使用する方法を紹介します。

Font Awesomeは世界的によく使われているアイコンの1つ。
Bootstrapで作られているサイト以外でも、多く使われています。

Font Awesomeの使用準備

まず、以下サイトにアクセスしてみましょう。

https://fontawesome.com/

「Start For Free」をクリック。
下図のような、メールアドレス登録フォームがあるページが開きます。

Font AwesomeもBootstrapと同様に、ダウンロードとCDNの２種類の方法で利用できます。
CDNでFont Awesomeを使うためには、メールアドレスの登録が必要です。
CDNを利用した方が簡単かつ便利ですので、登録してCDN版を使用してみましょう。

※メールアドレスの登録をしたくない方は、ダウンロード版を利用されても構いません。
ただし、導入・初期設定等に関してはサポート外となります。

1.CDNコードを利用する

メールアドレスを入力して「Send Kit Code」ボタンをクリック。

　　↓

送信完了画面が表示されたら、入力したメールアドレスで受信を確認してみましょう。

タイミングによってメールが届くまで1～2分かかるので、少し待ってみてください。
それでも届かなければ「Resend Confirmation Email」をクリックして、確認メールを再送信。

確認メールの中の、赤線で囲った部分（lick to Confirm ～）をクリック。

パスワードを登録する画面が開きます。
同じパスワードを２回入力して「Set Password & Continue」をクリック。

次の画面では、名前や利用目的などを聞かれます。
このフォームは必須ではありません。
面倒なら「No thanks. Let’s skip this step for now」でスキップしましょう。

下図のような、 kit's codeが表示されている画面になったら完了です。
表示されているコードをコピーして『2.CDNコードを貼り付ける』に進んでください。

Kit codeがわからない時

コードが表示されない、タブを閉じてしまった、などの場合は下記手順をお試しください。

1.https://fontawesome.com/ を開く
2.右上のユーザーアイコンをクリック
3.フォームが表示されたらSign Insする
4.上部メニューのkitsを開く（①）
5.英数字の並びをクリックする（②）

②をクリックすると kit's codeが掲載されている画面が開きます。

2.CDNコードを貼り付ける

コピーしたCDNコードは、HTMLファイルの<head>～</head>内に貼り付けて使います。

これでFont Awesomeを使用する準備が整いました。

Font Awesomeのアイコンを表示させる

基本の使い方

Font Awesomeからアイコンを選んで、表示させてみます。

上部メニューから「Icons」をクリックして開きます。
無料で使えるアイコン（free）をカテゴライスしてくれているので、開きましょう。

https://fontawesome.com/icons

使えるアイコンが一覧表示されます。
使いたいアイコンをクリックすると、ポップアップウィンドウが表示されます。
<i class="">...と表示されているところをクリックすると、コードがコピーできます。

コピーしたコードを、htmlファイル、アイコンを表示させたい箇所に貼り付けます。
ブラウザで表示すると、アイコンが確認できます。

無料版/有料版アイコン

freeで無料版でも使えるアイコンを絞り込んでいても、ポップアップウィンドウ上部のタブを切り替えると有料版のアイコンが出てきます。

下図のように黄色いボタンが「Start Using This Pro Icon」となっているものは有料版。
HTMLにコードを貼り付けても表示されないので注意しましょう。

アイコンのサイズ変更

Font Awesomeのアイコンは、fa-●というクラスを加えると、手軽に大きさを変更することが出来ます。

【例】

青いハイライト部分を、貼り付けたアイコンのクラスに追加してみましょう。
最初よりもアイコンが大きく表示されていますね。

【実習】アイコンを使ってみる

では、fontawesome.htmlを作ってアイコンの表示を確認してみましょう。
条件は以下のとおりです。

  • 異なるアイコンを3つ表示させてください（お好きなものでOK）
  • 3つのアイコンそれぞれ、bootstrapのクラスを使って色を変えます
  • デフォルトサイズ、fa-2xクラス、fa-4xクラスの3つのアイコンのサイズを変えます

まとめ

  • Bootstrapが推奨するアイコンは、WEBフォントアイコンである
  • WEBフォントアイコンは、CSSで簡単にサイズやカラーを変更できる
前のレッスン 次のレッスン レッスン一覧へ

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る

コース素材一覧

×