Bootstrap Iconsの導入方法を完全ガイド！CDN・npm・ダウンロードでアイコンを使いこなそう

Bootstrap Iconsの導入方法：CDN・npm・ダウンロードを徹底解説

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

生徒

「Bootstrapのアイコンってどうやって使うんですか？ボタンの横にアイコンをつけたりしたいんですけど……」

先生

「Bootstrap Iconsを導入すれば、簡単に矢印やハート、チェックマークなどのアイコンが使えるようになりますよ！」

生徒

「それって難しい設定が必要なんですか？」

先生

「いえ、3つの方法があるので、自分に合ったやり方を選べばOKです。順番に解説していきますね。」

1. Bootstrap Iconsとは？

Bootstrap Iconsとは、Bootstrap公式が提供する無料のアイコン集です。HTMLにクラス名を指定するだけで、色々なアイコンを簡単に表示できます。

「クラス名」というのは、見た目を変えるための名前のことです。アイコンを表示するには、たとえば bi bi-house のようなクラスを指定するだけでOKです。

2. 一番かんたんなCDNでの導入方法

CDN（シー・ディー・エヌ）とは、インターネット上にあるデータをそのまま使う仕組みです。Bootstrap Iconsを使うには、次のように1行だけHTMLに追加するだけで完了します。


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

このタグを、<head> タグの中に貼るだけで、すぐにアイコンが使えるようになります。

アイコンを表示したい場所には、以下のように書きます。


<i class="bi bi-alarm-fill"></i> アラーム

ブラウザ表示

たったこれだけで、きれいなアイコンが表示されます！

3. npmでインストールして使う方法

パソコンに開発環境がある場合や、Viteやwebpackを使っている人は、npmという方法でインストールできます。

npm（エヌ・ピー・エム）とは、JavaScriptのパッケージ（部品）を管理するツールのことです。

まず、次のコマンドをターミナルで実行します。


npm install bootstrap-icons

そのあと、JavaScriptやCSSファイルでBootstrap Iconsを読み込むには、次のように書きます。


// 例：main.jsやindex.jsなど
import 'bootstrap-icons/font/bootstrap-icons.css';

これでCDNを使わなくても、パソコンの中にあるBootstrap Iconsを使えるようになります。

4. ダウンロードして直接使う方法

インターネットに繋がっていなくても使えるようにしたい場合は、Bootstrap Iconsをダウンロードして使うこともできます。

公式サイトにアクセス
右上にある「Download」ボタンをクリック
ダウンロードしたフォルダの中から「bootstrap-icons.css」と「fonts」フォルダをコピー
自分のプロジェクトに入れて、CSSファイルを読み込む

HTMLに書くときはこのようになります。


<link rel="stylesheet" href="css/bootstrap-icons.css">

ダウンロードしたファイルは、CDNと同じようにHTMLの中で使えます。

5. よく使うアイコンの使い方例

アイコンには色々な種類があります。下記は代表的なアイコンです。


<i class="bi bi-house"></i> ホーム
<i class="bi bi-heart-fill text-danger"></i> ハート
<i class="bi bi-check-circle-fill text-success"></i> チェック

ブラウザ表示

クラス名に bi と bi-アイコン名 を書くだけで表示されるので、初心者にもとても使いやすいです。

6. よくある質問とトラブル対処

アイコンが表示されない：CDNやCSSが正しく読み込まれているか確認しましょう。
アイコンの名前が違っている：公式サイトで使いたいアイコンの名前を探してコピーしましょう。
アイコンの色を変えたい：text-primaryやtext-dangerなど、Bootstrapのクラスをつけましょう。

Bootstrap Iconsは、初心者でも直感的に使えるアイコンセットです。覚えておくと、Webページの見た目がぐっとよくなりますよ！

まとめ

Bootstrap Iconsは、初心者から経験者まで幅広い人が使いやすいアイコンセットであり、シンプルな導入でデザイン性を高められる便利なツールです。今回の記事では、CDN・npm・ダウンロードという三つの導入方法を比較しながら、それぞれのメリットや特徴を深く理解できるようにまとめてきました。とくに、CDNでの導入はHTMLに1行追加するだけで即座にアイコンが使える手軽さが魅力で、学習中の人にはもっとも人気の高い方法です。一方で、npmでのインストールは開発環境が整っている場合に向いており、プロジェクト管理がしやすくなります。また、ダウンロードして使う方法は、オフライン環境やネットワーク制限のある環境でも安心して利用できるという利点があります。

アイコンの書き方としても、bi と bi-アイコン名 の組み合わせという統一された形式で使えるため迷いにくく、視認性もよく、HTMLを書いているときにすぐに目的のアイコンを追加できます。例えば、ボタンの中にアイコンを入れたり、見出しの横にポイントとなるアイコンを添えるなど、デザインをより洗練されたものにする場面で重宝します。実際に、色を変更できるクラス text-primary や text-danger と組み合わせることで、アイコンを強調したり、特定の意味を表現したりすることも簡単です。

さらに、Bootstrap Iconsのサイトには膨大な種類のアイコンが揃っており、検索しながら必要なものを探す楽しさもあります。アイコン名をコピーし、そのままクラス名に使えるという点も初心者にとって理解しやすいポイントです。Web制作に慣れていない人ほど、視覚的なフィードバックが多いと作業が快適になりますが、Bootstrap Iconsはその点でも優れており、さまざまなアイコンを確認しながら実装していく楽しさも感じられるはずです。

ここでは、記事の内容を踏まえて、簡単なサンプルプログラムをまとめとして紹介しておきます。実際にHTML内でBootstrap Iconsを使う際の雰囲気や動作をイメージできるように、よく使われるパターンを中心に構成しています。アイコンを使い慣れることで、ボタン、ナビゲーション、一覧リストなどに視覚的な魅力を与えることができ、サイト全体の印象を大きく向上させます。

サンプルプログラム：アイコン付きボタンと見出し


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

<h1 class="fw-bold mb-3"><i class="bi bi-lightning-charge-fill text-warning"></i> サンプルページの見出し</h1>

<button class="btn btn-primary">
    <i class="bi bi-check-circle-fill me-1"></i> 決定する
</button>

<p class="mt-3">
    <i class="bi bi-info-circle-fill text-info"></i> このページでは、Bootstrap Icons を使ったボタンと見出しの例を紹介しています。
</p>

ブラウザ表示

上記の例では、アイコンを見出しやボタンに組み合わせることで視認性を高めつつ、機能的で直感的なデザインに仕上げています。特に、me-1 のようなBootstrapのマージンユーティリティを加えることで、アイコンとテキストの間に適度なスペースを入れ、読みやすさを確保することも重要なポイントです。こうした細かな調整を少しずつ積み重ねることで、デザインにまとまりが生まれ、ユーザーにとって理解しやすいWebページになります。

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

生徒

「Bootstrap Iconsを実際に使ってみたら、HTMLにクラスを追加するだけで本当にアイコンが表示されてびっくりしました！」

先生

「そうでしょう。複雑な設定がいらないので、初心者でも楽しみながらデザインに取り組めるんですよ。」

生徒

「CDN、npm、ダウンロードの三つがあるって知って、用途で使い分けられるのも便利だと思いました。とくにCDNは手軽でした！」

先生

「その通り。学習段階ならCDNが一番向いていますね。プロジェクトが大きくなるとnpmが便利になってくるので、それぞれ覚えておくと良いですよ。」

生徒

「アイコンの色を変えたり、ボタンと組み合わせたりして、もっと楽しくなってきました！」

先生