アイコン付きリンク（Icon link） v5.3.0新設
Bootstrap Iconsや他のアイコンを使ってスタイル化されたハイパーリンクをすばやく作成できる。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
このページの項目 v5.3.0新設
アイコンリンクヘルパーコンポーネントは、デフォルトのリンクスタイルを変更して外観を向上させ、アイコンとテキストのペアを素早く整列させる。配置はインラインのflexboxスタイルとデフォルトの gap 値によって設定され、アンダーラインはカスタムオフセットとカスタムカラーでスタイリングされる。アイコンは、関連するテキストの font-size に最も合うように自動的に 1em にサイズ調整される。
アイコンリンクは、Bootstrapアイコン（公式サイト）の使用を想定しているが、お好みのアイコンや画像をお使い下さい。
アイコンが純粋に装飾的な場合、実例のように
aria-hidden="true" を使って支援技術から隠すべきだろう。意味を伝えるアイコンの場合は、SVGに role="img" と適切な aria-label="..." を追加して、適切な代替テキスト手段を提供して下さい。
このページのアイコンについては別途以下の設定がなされている
SVGスプライト用：HTML（<body>の後）<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="arrow-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</symbol>
<symbol id="box-seam" viewBox="0 0 16 16">
<path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/>
</symbol>
<symbol id="clipboard" viewBox="0 0 16 16">
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
</symbol>
</svg>
アイコンフォント用：HTML（</head>の前）<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1/font/bootstrap-icons.min.css">
実例（Example）
通常の <a> 要素に .icon-link を追加し、リンクテキストの左側か右側にアイコンを挿入。アイコンは自動的に大きさ、配置、色付けされる。
見本1. 左側にアイコン
設定例
SVGスプライトの場合<a class="icon-link" href="#">
<svg class="bi" fill="currentColor" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
アイコンリンク
</a>
アイコンフォントの場合<a class="icon-link" href="#">
<i class="bi bi-box-seam mb-2" aria-hidden="true"></i>
アイコンリンク
</a>
見本2. 右側にアイコン
設定例
SVGスプライトの場合<a class="icon-link" href="#">
アイコンリンク
<svg class="bi" fill="currentColor" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
</a>
アイコンフォントの場合<a class="icon-link" href="#">
アイコンリンク
<i class="bi bi-arrow-right mb-2" aria-hidden="true"></i>
</a>
【設定】
<a>に.icon-linkを入れる- アイコンに
.biを入れると、アイコンのサイズを文字のサイズに合わせられる
【注意】
- SVGスプライトの場合は
<svg>にfill="currentColor"の設定がないとリンクのカラーにならない
ホバー状態のスタイル（Style on hover）
.icon-link-hover を追加し、ホバー状態でアイコンを右に移動させるようにする。
見本
設定例
<a class="icon-link icon-link-hover" href="#">
アイコンリンク
<svg class="bi" fill="currentColor" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
</a>【設定】
a.icon-linkに.icon-link-hoverを追加
カスタマイズ（Customize）
CSS変数、Sass変数、ユーティリティ、カスタムスタイルを使用して、アイコン付きリングのスタイルを変更。
CSS変数（CSS variables）
デフォルトの外観を変更するために、必要に応じて --bs-link-* と --bs-icon-link-* のCSS変数を修正。
--bs-icon-link-transform CSS変数を再定義することで、ホバー transform をカスタマイズできる：
見本1. ホバー時にアイコンが上に移動
設定例
<a class="icon-link icon-link-hover" style="--bs-icon-link-transform: translate3d(0, -.125rem, 0);" href="#">
<svg class="bi" fill="currentColor" aria-hidden="true"><use xlink:href="#clipboard"></use></svg>
アイコンリンク
</a>--bs-link-* CSS変数を再定義することで、カラーをカスタマイズできる：
見本2. ホバー時にリンクカラーが任意のものに変わる
設定例
<a class="icon-link icon-link-hover" style="--bs-link-hover-color-rgb: 25, 135, 84;" href="#">
アイコンリンク
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
</a>Sass変数（Sass variables）
アイコン付きリングのSass変数をカスタマイズして、Bootstrapを使用するプロジェクト全体のアイコンリンクスタイルを変更。
デフォルトの設定
scss/_variables.scss 内 icon-link-variables の設定$icon-link-gap: .375rem;
$icon-link-underline-offset: .25em;
$icon-link-icon-size: 1em;
$icon-link-icon-transition: .2s ease-in-out transform;
$icon-link-icon-transform: translate3d(.25em, 0, 0);
SassユーティリティAPI（Sass utilities API）
下線の色やオフセット距離を変更するリンクユーティリティを使用して、アイコンリンクを修正。
見本
設定例
<a class="icon-link icon-link-hover link-success link-underline-success link-underline-opacity-25" href="#">
アイコンリンク
<svg class="bi" fill="currentColor" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
</a>【設定】
.link-{themecolor}（色付きリンクヘルパー）クラスや.link-{property}-{value}(-hover)（リンクユーティリティ）クラスとの併用も可