cdnとbootstrapのlinkで使うicons導入完全ガイド最新版

注意点と補足

• バージョンを指定すると将来の互換性が安定します。
• オフラインで使う場合はファイルをダウンロードしてローカルに置いてください。
• アクセシビリティのため、装飾目的のアイコンにはaria-hidden=”true”を付け、意味を伝える場合は適切な代替テキストやaria-labelを付与してください。

これで基本の導入は完了です。必要に応じて次章で使い方を詳しく説明します。

アイコンの基本的な使い方

基本の表示方法

CDNを読み込んだ後は、HTMLにクラスを追加するだけで表示できます。例:

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

上の例は「家のドア」アイコンを表示します。アイコン名は公式サイトやドキュメントで確認してください。

サイズや色の変更

アイコンはフォントと同じ扱いなので、文字サイズや色で調整できます。簡単な例:

<i class="bi bi-heart" style="font-size:24px; color:#e63946;"></i>

CSSクラスを使えば複数箇所で統一できます。

配置の調整

テキストと同じ行に並べたい場合、そのまま使えます。中央揃えや余白は通常のCSSで調整します。例:

<span class="d-inline-block text-center" style="width:40px;"><i class="bi bi-alarm" style="font-size:20px;"></i></span>

アクセシビリティ（視覚支援）

視覚支援を考えると、意味を持つアイコンにはテキスト代替を用意します。装飾目的なら aria-hidden=”true” を付けます。

<!-- 装飾用 -->
<i class="bi bi-search" aria-hidden="true"></i>

<!-- 意味を伝える -->
<button>
  <i class="bi bi-cart"></i>
  <span class="visually-hidden">カートを見る</span>
</button>

アイコン名の探し方

使いたいアイコンの名前は公式サイトで一覧から探せます。見つけた名前を “bi-アイコン名” としてクラスに入れてください。

アイコンのカスタマイズ方法

Bootstrap Iconsは通常のCSSで自由に見た目を変えられます。ここでは使いやすいカスタマイズ方法を具体例とともに紹介します。

• サイズ変更
• インラインで指定:
• クラスでまとめる: .icon-lg{font-size:24px;} を作り

• プリセット: bi-3x のような拡大クラスが使える場合は手早く倍サイズにできます。

• 色の変更

• インライン: style=”color: #007bff;”

• テキストユーティリティ: text-primary や text-success でフレームワークに合わせた色にできます。

• ホバーやアニメーション

• transition と transform を使うと滑らかな変化を付けられます。例: .icon:hover{transform:scale(1.1); color:#0056b3; transition:0.2s;}

• 配置と余白

• vertical-align: middle でテキストと揃えます。margin やユーティリティクラス（me-2 など）で間隔調整します。

• アクセシビリティ

• 装飾目的なら aria-hidden=”true” を付けます。意味を伝えたい場合は ホーム のように補助テキストを用意します。

• レスポンシブ対応

• rem や em を使うとルートフォントサイズで拡大縮小します。メディアクエリで画面ごとに調整してください。

これらを組み合わせると、見た目と使い勝手を簡単に向上できます。

CDN以外の導入方法（補足）

概要

CDNを使わない場合は、npmでのインストールか、公式リポジトリからの手動ダウンロードが代表的です。ローカルでファイルを管理したい、ビルドツールと組み合わせたい場合に向きます。

1) npmによるインストール

コマンドでインストールします。

npm install bootstrap-icons

インストール後は、プロジェクトのビルド設定に合わせてCSSを読み込みます。例：

• webpackやViteでは、import ‘bootstrap-icons/font/bootstrap-icons.css’をエントリに追加します。
• CSSやフォントをdistにコピーして、通常ので参照しても使えます。

ビルドツールを使うと不要なアイコンだけ取り出す（ツリーシェイキング）や、キャッシュ対策のファイル名変更が行いやすくなります。

2) 手動ダウンロード

公式GitHubのReleasesやCode→Download ZIPから取得します。zipを展開して、必要なファイル（CSSとfontsフォルダ）をプロジェクトの適切な場所に置きます。

例：
– project/assets/css/bootstrap-icons.css
– project/assets/fonts/*

CSS内のフォントパスが相対指定なので、配置先に合わせてパスを修正してください。

注意点

• フォントファイルのパスが正しいか必ず確認してください。
• ライブラリの更新は手動管理になるため、npmならバージョン管理が楽です。

Bootstrap Iconsの使いどころと注意点

使いどころ

Bootstrap Iconsは、ボタン、ナビゲーション、フォームの補助、通知やリストの視認性向上など、汎用的なUI要素に向いています。軽量なSVG／フォントなので、スマホやレスポンシブデザインでも使いやすいです。

Bootstrap本体と独立して使える点

BootstrapのCSSを使っていなくても、アイコンのCSSやSVGスプライトを読み込めば利用できます。プロジェクトの見た目を変えずにアイコンだけ導入できます。

バージョン管理と公式ドキュメントの確認

新しいアイコン追加や名前変更が起きるため、使用するバージョンを固定すると安全です。アップデート前に公式のリリースノートやドキュメントで変更点を確認してください。

アイコンが表示されないときのチェックポイント

• アイコン名（例: “bi bi-alarm”）の綴りを確認
• CDNリンクやバージョンが正しいか確認
• CSS/スクリプトの読み込み順やキャッシュを確認
• ネットワークエラーやコンソールのエラーメッセージを確認

その他の注意点

ライセンスはMITで比較的使いやすいですが、商用利用時も確認してください。アクセシビリティのためにaria属性や代替テキストを設定し、必要なアイコンだけ読み込むことでパフォーマンスを改善できます。

よく使われるCDNサービス

以下では、Bootstrap Iconsでよく使われる主要なCDNと、その使い方や注意点を分かりやすく説明します。

主なCDN（公式推奨）

• jsDelivr
• 例:
• 高速で世界中にキャッシュがあり、バージョン指定が簡単です。
• cdnjs
• 例:
• 安定しており多くのライブラリが揃っています。

その他の取得方法

• 公式サイトやGitHubから最新のリンクやファイルを確認できます。最新版を使う際はバージョン表記を確認してください。

運用上のポイント

• バージョン固定（例: @1.11.1）で互換性を保ちます。最新を常に使う場合は意図しない変更が入る点に注意します。
• CDN依存だとユーザーがオフラインのときや企業内ネットワークでブロックされると表示されません。必要ならローカルに落としてフォールバックを用意してください。

これらを踏まえて、自分の用途に合ったCDNを選んでください。

まとめ

要点の振り返り

Bootstrap IconsはCDNリンクを使うと、数行の記述で簡単にアイコンを導入できます。プロトタイピングや本番サイトの両方で手早く使える点が大きな利点です。読み込みは軽く、HTML内でclassや

実践でのおすすめ

• 公式CDNや信頼できるサービスを使い、バージョンを固定して導入してください。
• 重要なUIはアクセシビリティ（aria-hiddenやaria-label）を忘れずに設定しましょう。
• カスタマイズはCSSやSVG属性で行えます。色や大きさは簡単に調整できます。

注意点

ネットワーク依存のため、外部CDNが使えない環境では代替手段（ローカル保存）を用意してください。また、ライセンスやバージョン差異に注意し、公式ドキュメントを確認する習慣を持つと安心です。

最後に、まずはCDNで試して、必要に応じてローカル導入や最適化を進めると便利です。