先生と生徒の会話形式で理解しよう

生徒

「Bootstrap3を使っていたときにGlyphiconsを使っていたんですが、Bootstrap5ではどうすればいいんですか？」

先生

「良い質問です。Bootstrap5ではGlyphiconsは廃止されて、その代わりにBootstrap Iconsという専用のアイコンライブラリを使うようになっています。」

生徒

「Glyphiconsが無くなったなら、今までのアイコンは全部使えなくなっちゃうんですか？」

先生

「その通りです。ただし、Bootstrap Iconsを導入すれば新しい方法でアイコンを簡単に表示できます。実務での移行手順も含めて、一緒に学んでいきましょう！」

1. GlyphiconsとBootstrap Iconsの違いを理解しよう

まず、Bootstrap3やBootstrap4を使っていたときに多くの人が利用していたのが「Glyphicons」です。Glyphiconsとは、Bootstrapに標準で同梱されていたアイコンセットのことです。例えば、検索の虫眼鏡マークや、矢印のアイコンなどを簡単に表示できました。

しかし、Bootstrap5ではGlyphiconsは削除されました。その理由は、Bootstrap自体が軽量化され、必要に応じて別のアイコンセットを読み込む仕組みに変わったからです。代わりに公式が提供しているのが「Bootstrap Icons」です。これはSVG形式（拡張子が.svgの画像ファイルで、拡大縮小しても劣化しない特徴を持つ）のアイコン集で、Webサイトやアプリで自由に使えるようになっています。

初心者の方は「SVG」という言葉に不安を感じるかもしれませんが、難しく考える必要はありません。単純に「きれいに拡大できる画像」と思ってもらえれば大丈夫です。

2. Bootstrap Iconsの導入方法

Bootstrap Iconsを使うには、まずWebページにアイコン用のCSSを読み込む必要があります。これは、Bootstrap本体を読み込む方法と同じく「CDN」と呼ばれる仕組みを使うのが一般的です。

CDNとは、インターネット上にあるサーバーから必要なファイルをダウンロードして利用する仕組みです。難しく聞こえるかもしれませんが、「外部から必要な部品を借りてきて使う」イメージだと思ってください。


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">

3. GlyphiconsをBootstrap Iconsに書き換える手順

ここからは、実際に移行するときの流れを具体的に見ていきます。例えば、Bootstrap3で検索アイコンを表示するときは以下のように書いていました。


<span class="glyphicon glyphicon-search"></span>

このコードでは「glyphicon」というクラスを使っていました。しかし、Bootstrap5ではこれが使えなくなります。その代わりに、Bootstrap Iconsを利用して次のように書きます。


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

ブラウザ表示

クラス名が「bi bi-アイコン名」に変わったことがポイントです。たとえば「glyphicon glyphicon-user」は「bi bi-person」に書き換える、といった具合に1つずつ対応させていきます。

4. よく使うGlyphiconsとBootstrap Iconsの対応表

すべてのアイコンを自分で探して変換するのは大変なので、ここでよく使われるものを表で紹介します。Bootstrap Iconsの公式サイトにも一覧がありますので、参考にしてください。

ユーザーアイコン： → 
検索アイコン： → 
編集アイコン（鉛筆）： → 
ゴミ箱アイコン： → 
チェックアイコン： →

5. 実務での移行のコツ

実際の現場でBootstrapをアップグレードする際は、次のような手順を意識するとスムーズです。

まずは自分のHTMLファイルの中から「glyphicon」という文字を検索します。
見つけたら、Bootstrap Iconsで対応するアイコン名を調べます。
「」の部分を「」に書き換えます。
書き換えた後はブラウザで表示を確認して、デザインが崩れていないかチェックします。

このように一つずつ置き換えていけば、初心者でも確実に移行を進められます。慣れてくると検索と置換を使ってまとめて変換することも可能ですが、最初は慎重に進めるのがおすすめです。

6. Bootstrap Iconsを使うメリット

最後に、なぜGlyphiconsではなくBootstrap Iconsを使うのか、そのメリットを整理しておきましょう。

SVG形式なので画質が劣化せず、拡大してもきれいに表示される。
アイコンの数が非常に豊富で、常に追加・更新されている。
自由に色や大きさをCSSで指定できるため、デザインの自由度が高い。
Bootstrap公式が提供しているため、安心して利用できる。

特に「大きさを変えてもぼやけない」という特徴は、スマホやタブレットのように画面サイズが異なるデバイスでWebサイトを表示する際に大きな利点となります。

まとめ

GlyphiconsからBootstrap Iconsへの移行を総復習

ここまでの記事では、Bootstrap3時代に標準で使われていたGlyphiconsが、 Bootstrap5では完全に廃止され、その代替としてBootstrap Iconsが採用されている理由と、具体的な移行手順について詳しく見てきました。アイコンはボタンやナビゲーション、検索フォーム、管理画面など、 Webサイトのあらゆる場所で使われる重要な要素です。そのため、Bootstrapのバージョンアップに伴うアイコン仕様の変化を正しく理解しておくことは、見た目の統一感や操作性を保つうえで欠かせません。

GlyphiconsはBootstrapに最初から含まれている点が便利でしたが、 Bootstrap本体の軽量化や柔軟性を高める方針により、役割を終えることになりました。代わりに登場したBootstrap Iconsは、SVGをベースとした現代的なアイコンライブラリで、拡大縮小しても画質が劣化せず、スマートフォンや高解像度ディスプレイでも美しく表示されます。これはレスポンシブデザインが当たり前になった現在のWeb制作において、非常に大きなメリットと言えるでしょう。

移行作業そのものは決して難しいものではなく、 HTML内に残っている「glyphicon」というクラスを探し、対応するBootstrap Iconsのクラス名に一つずつ置き換えていくだけです。最初は手作業で確認しながら進めることで、 Bootstrap Iconsの命名ルールや使い方にも自然と慣れていきます。この経験は、今後別のアイコンライブラリを使う際にも必ず役立ちます。

Bootstrap Iconsを使いこなすための実践的な視点

Bootstrap Iconsは、単にGlyphiconsの代替というだけでなく、より自由度の高いデザインを可能にします。 CSSと組み合わせることで、色を変えたりサイズを調整したり、ボタンやリンクと自然に馴染ませることができます。また、アイコンの種類が豊富なため、「この機能にはどんな意味を持たせたいか」を考えながら選ぶことで、ユーザーにとって分かりやすいUIを構築できます。

実務では、すべてのアイコンを一度に置き換えるのではなく、画面単位や機能単位で少しずつ対応していくのがおすすめです。そうすることで、表示確認もしやすく、デザイン崩れや見落としを防ぐことができます。 Bootstrap Iconsの公式一覧を見ながら、「どのアイコンが一番意味に合っているか」を考える時間も、 UI設計の良いトレーニングになります。

まとめ用サンプルプログラム


<div class="container my-4">
    <h1 class="fw-bold text-center mb-3">
        <i class="bi bi-bootstrap-fill"></i> アイコン移行サンプル
    </h1>

    <p class="text-center">
        <i class="bi bi-search"></i>
        検索アイコンをBootstrap Iconsで表示
    </p>

    <p class="text-center">
        <i class="bi bi-person"></i>
        ユーザーアイコンをBootstrap Iconsで表示
    </p>

    <p class="text-center">
        <i class="bi bi-trash"></i>
        削除操作を示すアイコン例
    </p>
</div>

ブラウザ表示

先生と生徒の振り返り会話

生徒

「Glyphiconsが使えなくなったと聞いたときは不安でしたが、 Bootstrap Iconsの方ができることが多いんですね。」

先生

「そうですね。SVGベースなので表示もきれいですし、今後のWeb制作ではこちらが標準になります。」

生徒

「クラス名を置き換えるだけなら、思っていたより移行作業も簡単そうです。」

先生

「その通りです。今回学んだ手順を覚えておけば、 Bootstrapのバージョンアップにも落ち着いて対応できますよ。」