Bootstrap: アイコン

Q: アイコンが表示されない場合はどうすればよいですか？

3つの手順でトラブルシューティングできます。(1) CDNリンクが正しく読み込まれていることを確認します： <link rel="stylesheet" href="...bootstrap-icons.min.css"> 。(2) アイコン名が正しいか確認します。 bi- プレフィックス + 英語の小文字名 + ハイフンです。(3) ブラウザのコンソールでNetworkタブを開き、CDNが正常に読み込まれたことを確認します。

Q: CSSファイル全体をインポートせずに特定のアイコンだけを読み込むことはできますか？

はい、SVGスプライトメソッドを使用できます。 <use href="...bootstrap-icons.svg#name"/> で必要に応じて参照します。単一のSVGをHTMLにインラインで記述することもできます。さらに、ツール（アイコンフォントジェネレータなど）を使用して、カスタムサブセットを作成することもできます。

Q: アイコンのみのボタンのアクセシビリティを確保するにはどうすればよいですか？

3つの解決策があります。(1) スクリーンリーダー用テキストとして <span class="visually-hidden">テキスト説明</span> を追加します。(2) <i> タグに aria-label="説明" を設定します。(3) <a> または <button> で囲み、 title 属性からツールチップを提供します。互換性が最も高いのは解決策(1)です。

Q: アイコンを重ね合わせたり、組み合わせたりできますか？

はい、 position-relative と position-absolute を使用してアイコンを重ね合わせることができます。例えば、 bi-envelope の右上に bi-dot-fill を配置して、未読メッセージを示すことができます。さらに、CSSの mask や background プロパティを使用して、より複雑な組み合わせを実現することもできます。

最終更新：2026-08-26

1. コース紹介

(1) 前提条件

Bootstrapコンポーネントの基本的な使用方法（第16回 - Accordion）
HTMLインライン要素とclass属性
CSSのカラーとフォントサイズの制御

(2) 🎯 学習内容

CDNを使用してBootstrap Iconsライブラリを導入する方法
bi-*クラスを使用してページにアイコンを埋め込む方法
fs-*およびtext-*ユーティリティでアイコンのサイズとカラーを制御する方法
ボタン、Navbar、Cardなどのコンポーネントにアイコンを統合する方法
SVGメソッドを使用して、より柔軟なアイコンレンダリングを実装する方法

(3) 課題点

Charlieのプロダクト管理ページでは、可読性を向上させるためにボタンやナビゲーションにアイコンを追加する必要があります。編集ボタンにはペンシルアイコン、削除ボタンにはゴミ箱アイコン、Navbarには検索アイコンが求められています。Bootstrap Iconsを使えば、ほんの数行のコードでこれが実現できます。

(4) 解決策

アイコンはインターフェースにおいて重要な視覚要素です。Bootstrap Iconsは、Bootstrap公式のオープンソースSVGアイコンライブラリで、2000以上のアイコンを含み、Bootstrapコンポーネントと完璧に連携します。

(5) メリット

Bootstrap Iconsを使えば、アイコンの追加はたった数行のコードで完了します。すべてのアイコンはBootstrapコンポーネントとシームレスに統合され、統一された制御可能なカラーとサイズにより、インターフェースの可読性が大幅に向上します。

2. Bootstrap Iconsの導入

▶ サンプル基本的なアイコンデモ

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Icons Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Bootstrap Icons CDN -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <div class="container py-4">
    <h5>Basic Icons</h5>
    <i class="bi bi-house"></i> Home
    <i class="bi bi-gear"></i> Settings
    <i class="bi bi-person"></i> Profile
    <i class="bi bi-envelope"></i> Messages
    <i class="bi bi-bell"></i> Notifications

    <hr>

    <h5>Icons with Colors</h5>
    <i class="bi bi-heart-fill text-danger fs-3"></i>
    <i class="bi bi-star-fill text-warning fs-3"></i>
    <i class="bi bi-check-circle-fill text-success fs-3"></i>
    <i class="bi bi-info-circle-fill text-primary fs-3"></i>

    <hr>

    <h5>Icons in Buttons</h5>
    <button class="btn btn-primary"><i class="bi bi-plus-lg"></i> Add</button>
    <button class="btn btn-success"><i class="bi bi-pencil"></i> Edit</button>
    <button class="btn btn-danger"><i class="bi bi-trash"></i> Delete</button>
    <button class="btn btn-outline-secondary"><i class="bi bi-search"></i> Search</button>

    <hr>

    <h5>Icon Sizes</h5>
    <i class="bi bi-circle fs-6"></i> fs-6
    <i class="bi bi-circle fs-4"></i> fs-4
    <i class="bi bi-circle fs-2"></i> fs-2
    <i class="bi bi-circle fs-1"></i> fs-1
  </div>
</body>
</html>

▶ 試してみよう

(1) 基本クラス

HTML

<i class="bi bi-{name}"></i>

▶ 試してみよう

アイコン構文	レンダリング効果	説明
`<i class="bi bi-alarm"></i>`	🔔	目覚まし時計アイコン
`<i class="bi bi-calendar"></i>`	📅	カレンダーアイコン
`<i class="bi bi-camera"></i>`	📷	カメラアイコン
`<i class="bi bi-heart-fill"></i>`	❤️	塗りつぶしハート（`-fill`塗りつぶし版）
`<i class="bi bi-star"></i>`	⭐	アウトラインの星（アウトライン版）

-fillサフィックス： ほとんどのアイコンは -fill の塗りつぶし版を提供しています。bi-heart はアウトライン、bi-heart-fill は塗りつぶし版です。

(2) 一般的なアイコンカテゴリー

カテゴリー	アイコン	シナリオ
ナビゲーション	`bi-house` / `bi-gear` / `bi-person`	ナビゲーションメニュー
アクション	`bi-plus` / `bi-pencil` / `bi-trash` / `bi-download`	ボタン
ステータス	`bi-check-circle` / `bi-exclamation-triangle` / `bi-info-circle`	フィードバック
ソーシャル	`bi-twitter-x` / `bi-github` / `bi-linkedin`	ソーシャルリンク
矢印	`bi-chevron-right` / `bi-arrow-left` / `bi-caret-down`	ナビゲーション/Carousel
メディア	`bi-play-fill` / `bi-pause-fill` / `bi-volume-up`	プレーヤー

3. アイコンの使用方法

▶ サンプルソーシャルメディアアイコンリンク

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Social Media Icons</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <div class="container py-4">
    <h5>Social Media Links</h5>
    <div class="d-flex gap-3 fs-3">
      <a href="#" class="text-primary"><i class="bi bi-facebook"></i></a>
      <a href="#" class="text-info"><i class="bi bi-twitter-x"></i></a>
      <a href="#" class="text-danger"><i class="bi bi-instagram"></i></a>
      <a href="#" class="text-success"><i class="bi bi-whatsapp"></i></a>
      <a href="#" class="text-secondary"><i class="bi bi-github"></i></a>
      <a href="#" class="text-primary"><i class="bi bi-linkedin"></i></a>
      <a href="#" class="text-danger"><i class="bi bi-youtube"></i></a>
    </div>

    <hr>

    <h5>With Labels</h5>
    <div class="d-flex gap-4">
      <a href="#" class="text-center text-decoration-none">
        <i class="bi bi-facebook d-block fs-2 text-primary"></i>
        <small>Facebook</small>
      </a>
      <a href="#" class="text-center text-decoration-none">
        <i class="bi bi-twitter-x d-block fs-2 text-dark"></i>
        <small>Twitter</small>
      </a>
      <a href="#" class="text-center text-decoration-none">
        <i class="bi bi-instagram d-block fs-2 text-danger"></i>
        <small>Instagram</small>
      </a>
    </div>
  </div>
</body>
</html>

▶ 試してみよう

▶ サンプルアイコンとボタンの組み合わせ

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Icon Button Combinations</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
  <div class="container py-4">
    <h5>Button with Icon Left</h5>
    <button class="btn btn-primary"><i class="bi bi-download me-1"></i> Download</button>
    <button class="btn btn-success"><i class="bi bi-check-lg me-1"></i> Save</button>
    <button class="btn btn-danger"><i class="bi bi-trash me-1"></i> Delete</button>

    <h5 class="mt-3">Icon Only Button</h5>
    <button class="btn btn-outline-primary" aria-label="Search"><i class="bi bi-search"></i></button>
    <button class="btn btn-outline-secondary" aria-label="Notifications"><i class="bi bi-bell"></i></button>
    <button class="btn btn-outline-info" aria-label="Settings"><i class="bi bi-gear"></i></button>

    <h5 class="mt-3">Button Group with Icons</h5>
    <div class="btn-group" role="group">
      <button class="btn btn-outline-primary"><i class="bi bi-justify-left"></i></button>
      <button class="btn btn-outline-primary"><i class="bi bi-justify"></i></button>
      <button class="btn btn-outline-primary"><i class="bi bi-justify-right"></i></button>
    </div>

    <h5 class="mt-3">Icon + Badge Button</h5>
    <button class="btn btn-primary position-relative">
      <i class="bi bi-cart"></i> Cart
      <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">3</span>
    </button>
  </div>
</body>
</html>

▶ 試してみよう

4. アイコンのサイズ制御

▶ サンプルカスタムカラーのアイコンリスト

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Color Icon List</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <style>
    .icon-list { list-style: none; padding: 0; }
    .icon-list li { padding: 0.5rem 0; display: flex; align-items: center; gap: 0.75rem; }
    .icon-list .bi { font-size: 1.5rem; }
  </style>
</head>
<body>
  <div class="container py-4">
    <h5>Feature List with Custom Colors</h5>
    <ul class="icon-list">
      <li><i class="bi bi-shield-check text-success"></i> <span><strong>Security</strong> — 256-bit encryption</span></li>
      <li><i class="bi bi-lightning-charge text-warning"></i> <span><strong>Speed</strong> — CDN optimized delivery</span></li>
      <li><i class="bi bi-cloud-check text-info"></i> <span><strong>Backup</strong> — Automatic daily backup</span></li>
      <li><i class="bi bi-headset text-primary"></i> <span><strong>Support</strong> — 24/7 customer service</span></li>
      <li><i class="bi bi-graph-up-arrow text-danger"></i> <span><strong>Analytics</strong> — Real-time dashboard</span></li>
    </ul>

    <hr>

    <h5>Gradient Icons (Custom CSS)</h5>
    <div class="d-flex gap-3 fs-1">
      <i class="bi bi-heart-fill" style="color: #ff6b6b;"></i>
      <i class="bi bi-star-fill" style="color: #feca57;"></i>
      <i class="bi bi-moon-fill" style="color: #48dbfb;"></i>
      <i class="bi bi-sun-fill" style="color: #ff9ff3;"></i>
      <i class="bi bi-flower1" style="color: #54a0ff;"></i>
    </div>
  </div>
</body>
</html>

▶ 試してみよう

クラス	CSS値	実際のサイズ	適用シナリオ
`fs-6`	`font-size: 1rem`	16px	インラインテキストアイコン
`fs-5`	`font-size: 1.25rem`	20px	リストアイテムアイコン
`fs-4`	`font-size: 1.5rem`	24px	ボタンアイコン
`fs-3`	`font-size: 1.75rem`	28px	Navbarアイコン
`fs-2`	`font-size: 2rem`	32px	Cardタイトルアイコン
`fs-1`	`font-size: 2.5rem`	40px	ヒーロー/大きなアイコン
カスタム	`style="font-size: 3rem"`	48px以上	特に強調するシナリオ

(1) アイコンとテキストの組み合わせパターン

パターン	構造	例
アイコンが前	`<i class="bi bi-* me-2"></i>テキスト`	`<i class="bi bi-house me-2"></i>Home`
アイコンが後	`テキスト<i class="bi bi-* ms-2"></i>`	`More<i class="bi bi-arrow-right ms-2"></i>`
アイコンが上	`<i class="bi bi-* d-block"></i><span>テキスト</span>`	ソーシャルメディアアイコン
アイコンがテキストを置き換える	`<button aria-label="Search"><i class="bi bi-search"></i></button>`	アイコンのみのボタン
アイコン + バッジ	`<i class="bi bi-* position-relative"><span class="badge">N</span></i>`	通知カウント

5. コンポーネントでのアイコン應用

HTML

<!-- ボタン内のアイコン -->
<button class="btn btn-primary"><i class="bi bi-plus-lg"></i> Add</button>
<button class="btn btn-danger"><i class="bi bi-trash"></i> Delete</button>
<button class="btn btn-outline-secondary"><i class="bi bi-search"></i> Search</button>

<!-- Navbar内のアイコン -->
<nav class="nav">
  <a class="nav-link" href="#"><i class="bi bi-house me-1"></i>Home</a>
  <a class="nav-link" href="#"><i class="bi bi-box me-1"></i>Products</a>
  <a class="nav-link" href="#"><i class="bi bi-envelope me-1"></i>Messages</a>
</nav>

<!-- Alert内のアイコン -->
<div class="alert alert-success d-flex align-items-center">
  <i class="bi bi-check-circle-fill me-2"></i>
  Operation completed successfully.
</div>

<div class="alert alert-danger d-flex align-items-center">
  <i class="bi bi-exclamation-triangle-fill me-2"></i>
  An error occurred. Please try again.
</div>

<!-- Card内のアイコン -->
<div class="card text-center p-4">
  <i class="bi bi-cloud-upload fs-1 text-primary"></i>
  <h5 class="mt-2">Upload File</h5>
  <p class="text-body-secondary">Drag and drop file here</p>
</div>

<!-- リストグループ内のアイコン -->
<ul class="list-group">
  <li class="list-group-item"><i class="bi bi-house me-2"></i>Dashboard</li>
  <li class="list-group-item"><i class="bi bi-box me-2"></i>Products</li>
  <li class="list-group-item"><i class="bi bi-people me-2"></i>Users</li>
  <li class="list-group-item"><i class="bi bi-graph-up me-2"></i>Reports</li>
</ul>

▶ 試してみよう

6. SVGメソッド

CSSクラスでBootstrap Iconsを使用するだけでなく、SVGの<use>タグでスプライトファイルを直接参照することもできます。

HTML

<!-- クラスメソッド -->
<i class="bi bi-house"></i>

<!-- SVGメソッド -->
<svg class="bi" width="16" height="16" fill="currentColor">
  <use xlink:href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/bootstrap-icons.svg#house"/>
</svg>

<!-- SVG + カスタムカラー -->
<svg class="bi text-success" width="32" height="32" fill="currentColor">
  <use xlink:href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/bootstrap-icons.svg#check-circle"/>
</svg>

▶ 試してみよう

比較項目	クラスメソッド (`<i>`)	SVGメソッド (`<svg>`)
構文	`<i class="bi bi-*"></i>`	`<svg><use href="...#name"/></svg>`
読み込み方法	CDN CSSファイル	リモートスプライトSVGファイル
マルチカラーのサポート	シングルカラー (currentColorを継承)	マルチカラーSVGをサポート
サイズ制御	`fs-*` ユーティリティクラス	`width`/`height` 属性
カラー制御	`text-*` ユーティリティクラス	`fill` 属性または `text-*`
適用シナリオ	迅速な統合、標準的なシナリオ	カスタムスタイルが必要なシナリオ

7. アイコンの高度な應用

▶ サンプル CSSアニメーションアイコン

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animated Icons</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <style>
    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }
    @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
    @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
    .icon-spin { animation: spin 2s linear infinite; display: inline-block; }
    .icon-pulse { animation: pulse 1.5s ease-in-out infinite; display: inline-block; }
    .icon-shake { animation: shake 0.5s ease-in-out infinite; display: inline-block; }
    .icon-bounce { animation: bounce 1s ease-in-out infinite; display: inline-block; }
  </style>
</head>
<body>
  <div class="container py-4">
    <h5>Animated Icons</h5>
    <div class="d-flex gap-4 fs-1 mb-4">
      <div class="text-center">
        <i class="bi bi-arrow-clockwise icon-spin text-primary"></i>
        <div><small>Spin</small></div>
      </div>
      <div class="text-center">
        <i class="bi bi-bell-fill icon-shake text-warning"></i>
        <div><small>Shake</small></div>
      </div>
      <div class="text-center">
        <i class="bi bi-heart-fill icon-pulse text-danger"></i>
        <div><small>Pulse</small></div>
      </div>
      <div class="text-center">
        <i class="bi bi-chevron-down icon-bounce text-success"></i>
        <div><small>Bounce</small></div>
      </div>
    </div>

    <h5>Loading Spinner</h5>
    <div class="d-flex align-items-center gap-3">
      <i class="bi bi-arrow-clockwise icon-spin fs-3 text-primary"></i>
      <span>Loading...</span>
    </div>

    <h5 class="mt-3">Notification Bell</h5>
    <button class="btn btn-outline-warning"
      onmouseover="this.querySelector('i').classList.add('icon-shake')"
      onmouseout="this.querySelector('i').classList.remove('icon-shake')">
      <i class="bi bi-bell-fill"></i> Notifications
    </button>
  </div>
</body>
</html>

▶ 試してみよう

flowchart TD
    A[アイコンが必要] --> B{使用シナリオ}
    B --> C[ナビゲーション/ボタン/リスト]
    B --> D[ソーシャルメディアリンク]
    B --> E[読み込み/アニメーション効果]
    C --> F{数量}
    F --> G[少数 < 10]
    F --> H[多数 ≥ 10]
    G --> I[インラインSVGまたはクラス]
    H --> J[CDN CSSインポート]
    D --> K[カラークラス + リンク]
    E --> L[CSS @keyframesアニメーション]
    I --> M[bi-*クラスを使用]
    J --> M
    M --> N[fs-* / text-*でスタイル設定]

シナリオ	推奨方法	説明
ボタンアイコン	`<i class="bi bi-*"></i>`	`me-1`/`ms-1`で間隔を制御
アイコンのみのボタン	`<button aria-label="..."><i ...></i></button>`	`aria-label`を必ず追加
ナビゲーションリンク	`<a><i class="bi bi-* me-1"></i>テキスト</a>`	アイコン + テキストの組み合わせ
通知バッジ	`<span class="position-relative"><i ...></i><span class="badge">N</span></span>`	右上にバッジを配置
読み込みアニメーション	`<i class="bi bi-arrow-clockwise" style="animation: spin 2s linear infinite"></i>`	CSSアニメーションと併用

比較項目	Bootstrap Icons	Font Awesome
フォーマット	SVGアイコン（フォントではない）	アイコンフォント
アイコン数	2000以上	7800以上 (Pro)
料金	無料オープンソース	無料版は制限あり、Proは有料
プレフィックス	`bi bi-*`	`fas fa-` / `far fa-`
Bootstrapとの統合	公式、完璧な統合	追加の設定が必要
マルチカラーのサポート	シングルカラー（SVGはマルチカラー対応）	シングルカラー（フォントの制限）
ファイルサイズ	~120KB (CSS)	~300KB以上（フルスイート）

❓ よくある質問

Q Bootstrap IconsとFont Awesomeのどちらを選べばよいですか？

A Bootstrapプロジェクトでは、Bootstrap Iconsが第一の選択肢です。公式で、シームレスに統合でき、ファイルサイズも小さいからです。すでにFont Awesomeを使用している、または特殊なアイコン（例：ブランドアイコン）が必要な場合は、Font Awesomeを引き続き使用できますが、プレフィックスが異なることに注意してください（bi bi-* vs fas fa-*）。

Q アイコンが表示されない場合はどうすればよいですか？

A 3つの手順でトラブルシューティングできます。(1) CDNリンクが正しく読み込まれていることを確認します：<link rel="stylesheet" href="...bootstrap-icons.min.css">。(2) アイコン名が正しいか確認します。bi-プレフィックス + 英語の小文字名 + ハイフンです。(3) ブラウザのコンソールでNetworkタブを開き、CDNが正常に読み込まれたことを確認します。

Q CSSファイル全体をインポートせずに特定のアイコンだけを読み込むことはできますか？

A はい、SVGスプライトメソッドを使用できます。<use href="...bootstrap-icons.svg#name"/>で必要に応じて参照します。単一のSVGをHTMLにインラインで記述することもできます。さらに、ツール（アイコンフォントジェネレータなど）を使用して、カスタムサブセットを作成することもできます。

Q Bootstrap IconsとFont Awesomeのクラス名を同時に使用できますか？

A 構文的には両方のライブラリをインポートできますが、プレフィックスが異なることに注意してください（Bootstrap Iconsはbi bi-*、Font Awesomeはfas fa-*）。両方をインポートすると読み込みサイズが増加するため、1つに統一することをお勧めします。Font Awesomeから移行する場合は、検索と置換を使用してクラス名を一括変更できます。

Q アイコンのみのボタンのアクセシビリティを確保するにはどうすればよいですか？

A 3つの解決策があります。(1) スクリーンリーダー用テキストとして<span class="visually-hidden">テキスト説明</span>を追加します。(2) <i>タグにaria-label="説明"を設定します。(3) <a>または<button>で囲み、title属性からツールチップを提供します。互換性が最も高いのは解決策(1)です。

Q アイコンを重ね合わせたり、組み合わせたりできますか？

A はい、position-relativeとposition-absoluteを使用してアイコンを重ね合わせることができます。例えば、bi-envelopeの右上にbi-dot-fillを配置して、未読メッセージを示すことができます。さらに、CSSのmaskやbackgroundプロパティを使用して、より複雑な組み合わせを実現することもできます。

📖 まとめ

Bootstrap Iconsは公式のSVGアイコンライブラリで、bootstrap-icons.cssを介してインポートします
<i class="bi bi-{name}"></i>の構文を使用します。-fillサフィックスは塗りつぶし版を表します
アイコンはfs-*でサイズを、text-*でカラーを調整できます
一般的な應用シナリオ：ボタン、リストグループ、Alert、Card、Navbar
SVGメソッド（<use>）はより柔軟なレンダリング制御を提供し、マルチカラーとカスタムスタイルをサポートします

📝 練習問題

⭐ 5つのリンク（Home（house）、Products（box）、About（info-circle）、Blog（file-text）、Contact（envelope））の前にアイコンを付けたNavbarを作成してください。
⭐⭐ ボタングループを作成してください：Search（search）、Add（plus-lg）、Edit（pencil）、Delete（trash）、Download（download）。各ボタンに対応するアイコンとテキストを付けます。
⭐⭐⭐ 以前のAlert例を修正してアイコンを含めてください：Successにはbi-check-circle-fill、Dangerにはbi-exclamation-triangle-fill、Infoにはbi-info-circle-fillを使用し、フェードインアニメーション効果を追加してください。

前回のレッスン: Accordion · 次のレッスン: Utilities

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

私たちについて

Bootstrap: アイコン

1. コース紹介

(1) 前提条件

(2) 🎯 学習内容

(3) 課題点

(4) 解決策

(5) メリット

2. Bootstrap Iconsの導入

▶ サンプル 基本的なアイコンデモ

(1) 基本クラス

(2) 一般的なアイコンカテゴリー

3. アイコンの使用方法

▶ サンプル ソーシャルメディアアイコンリンク

▶ サンプル アイコンとボタンの組み合わせ

4. アイコンのサイズ制御

▶ サンプル カスタムカラーのアイコンリスト

(1) アイコンとテキストの組み合わせパターン

5. コンポーネントでのアイコン應用

6. SVGメソッド

7. アイコンの高度な應用

▶ サンプル CSSアニメーションアイコン

❓ よくある質問

📖 まとめ

📝 練習問題

▶ サンプル基本的なアイコンデモ

▶ サンプルソーシャルメディアアイコンリンク

▶ サンプルアイコンとボタンの組み合わせ

▶ サンプルカスタムカラーのアイコンリスト