Bootstrap Iconsの使い方を完全解説！初心者でもわかるアイコン基本操作ガイド

1. Bootstrap Iconsとは何かを知ろう

1. Bootstrap Iconsとは何かを知ろう

Bootstrap Iconsとは、Webページで使えるアイコンを集めた無料の素材集です。アイコンとは、家のマークや虫眼鏡のマークのように、見ただけで意味が伝わる小さな絵のことです。Bootstrap Iconsは、BootstrapというCSSフレームワークと相性がよく、HTMLにクラス名を付けるだけで表示できます。画像ファイルを用意する必要がないため、初心者でも扱いやすいのが特徴です。

2. アイコンは文字と同じ感覚で使える

2. アイコンは文字と同じ感覚で使える

Bootstrap Iconsは、フォントのように扱えるアイコンです。そのため、文章の途中やボタンの中にも自然に配置できます。たとえば、ノートに文字を書く感覚で、HTMLの中にアイコンを書くことができます。難しい設定は不要で、決められた書き方を覚えるだけで使えるのが魅力です。

3. bi bi-＊というクラス名の基本ルール

3. bi bi-＊というクラス名の基本ルール

Bootstrap Iconsを使うときは、必ずbiというクラス名と、bi-から始まるアイコン名を指定します。このbiは「Bootstrap Iconsを使います」という合図のようなものです。bi-houseやbi-starのように、ハイフンの後ろにアイコンの名前を書きます。名前は英語ですが、公式サイトの一覧から選ぶだけなので暗記は不要です。

4. 一番シンプルなアイコン表示のHTML例

4. 一番シンプルなアイコン表示のHTML例

まずは、もっとも基本的なアイコンの表示方法を見てみましょう。下の例では、家の形をしたアイコンを表示しています。iタグにクラス名を書くだけで、アイコンが表示されます。

<i class="bi bi-house"></i>

5. 文字やボタンと一緒に使う方法

5. 文字やボタンと一緒に使う方法

Bootstrap Iconsは、文章やボタンの中に入れて使うことがよくあります。たとえば、送信ボタンに紙飛行機のアイコンを付けると、何をするボタンなのか直感的に伝わります。アイコンは文字と同じ扱いなので、spanタグやbuttonタグの中にもそのまま書けます。

<button class="btn btn-primary">
    <i class="bi bi-send"></i> 送信
</button>

6. サイズや色を変えてみよう

6. サイズや色を変えてみよう

アイコンの大きさや色は、文字と同じ方法で変更できます。Bootstrapには、文字サイズや色を変えるクラスが用意されています。たとえば、fs-3で文字を大きくしたり、text-dangerで赤色にしたりできます。これにより、特に目立たせたいアイコンを簡単に強調できます。

<i class="bi bi-exclamation-triangle fs-3 text-danger"></i>

7. 一覧表示でアイコンを並べる例

7. 一覧表示でアイコンを並べる例

複数のアイコンを並べて表示したい場合も、特別なことは必要ありません。HTMLにそのまま続けて書くだけで横に並びます。たとえば、連絡先やメニューを表すときに、アイコンを並べると見た目が分かりやすくなります。

<div>
    <i class="bi bi-telephone"></i>
    <i class="bi bi-envelope"></i>
    <i class="bi bi-geo-alt"></i>
</div>

8. 初心者がつまずきやすいポイント

8. 初心者がつまずきやすいポイント

初心者がよく困るのは、アイコンが表示されない場合です。その多くは、クラス名のスペルミスや、biというクラスを付け忘れていることが原因です。また、Bootstrap Iconsが読み込まれていないと表示されません。表示されないときは、クラス名が正しいかを一文字ずつ確認する習慣をつけると安心です。

9. Bootstrap Iconsを使うメリット

9. Bootstrap Iconsを使うメリット

Bootstrap Iconsを使う最大のメリットは、統一感のあるデザインを簡単に作れることです。すべて同じデザインルールで作られているため、ページ全体がきれいにまとまります。また、画像と違って軽く、表示速度にも優しいため、Webサイトの表示が遅くなりにくい点も初心者にとって安心できるポイントです。