リンク先へ飛ぶ際の矢印アイコンやSNSアイコンなど、「Webページの中でいろいろなアイコンを使いたい！」と思う方もいるでしょう。そこで今回は、Bootstrap4のおすすめアイコンツールと使い方を紹介していきます。ぜひ、参考にしてみてください。

PG

アイコンは視覚的に情報を伝えることができるので、ユーザーの文字を読むストレスを減らす効果があるんですよ。

PM

確かに、分かりやすいアイコンがあるとパッと見で何を表しているか分かりますよね！

Bootstrap4の推奨アイコン3つを紹介

では、さっそく本題に入っていきましょう。
Bootstrap4では、次の3つのアイコンツールが推奨されています。

推奨アイコンツール

• Font Awesome
• Feather
• Octicons

これら3つは、Bootstrap側で実際に用いテストが済んだ状態のアイコンツールです。ちなみに、Bootstrap側でのテストが未実施のため推奨されているわけではありませんが、使用可能なアイコンツールもあります。

テスト未実施のアイコンツール

• Bytesize
• Google Material icons
• Ionicons
• Dripicons
• Ikons
• Icons8

様々なアイコンツールがありますが、特にこだわりがない場合はBootstrap4で推奨されているアイコンツールを使用すると良いでしょう。
 

アイコンをページに導入する方法

使うべきアイコンツールが分かったところで、ここでは実際にアイコンをWebページ内に取り入れていきたいと思います。
※ここでは一番メジャーなFont Awesomeを使っていきます。

Font Awesomeの導入方法

HTMLの内にCDNコードを記述します。
※Bootstrapのリンクを記述したあとに記述するようにしてください。

CDNは頻繁にアップデートされているため、他のサイトからコピーしたURLでは上手くアイコンが表示されないことがあります。下記ページへアクセスし、最新のCDNを取得するようにしてください。
→ https://fontawesome.com/start
※メールアドレスへの送信が必要です。

下記画面でコピーします。

アイコンの使い方

アイコンを載せたい箇所に次の記述をします。

例えばTwitterアイコンであれば次のようになります。

各アイコンのコードは下記ページで確認することができます。
→ https://fontawesome.com/icons

PG

ヘッダーにCDNを記述し、アイコンを表示したい場所にコードを書く。とても簡単な作業でしたね。

PM

はい、すぐにできました！Webページにアイコンを載せるってとても簡単なんですね。

アイコンを使ってオシャレなWebページを作成しよう

Bootstrapで推奨されているアイコンセットを導入すると、短いコードを書くだけでオシャレなアイコンが使えるようになります。Webページを作成する際は、ぜひ活用してみてはいかがでしょうか。