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

生徒

「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サイトを表示する際に大きな利点となります。

BootstrapのGlyphiconsからBootstrap Iconsへの移行手順を初心者向けに解説！