アイコン付きリンク（Icon link） v5.3.0新設 v5.3.4設定変更

アイコンリンクヘルパーコンポーネントは、デフォルトのリンクスタイルを変更して外観を向上させ、アイコンとテキストのペアを素早く整列させる。配置はインラインのflexboxスタイルとデフォルトの gap 値によって設定され、アンダーラインはカスタムオフセットとカスタムカラーでスタイリングされる。アイコンは、関連するテキストの font-size に最も合うように自動的に 1em にサイズ調整される。

アイコンリンクは、Bootstrapアイコン（公式サイト）の使用を想定しているが、お好みのアイコンや画像をお使いください。

実例（Example）

通常の <a> 要素に .icon-link を追加し、リンクテキストの左側か右側にアイコンを挿入。アイコンは自動的に大きさ、配置、色付けされる。

見本1. 左側にアイコン

設定例

<a class="icon-link" href="#">
  <svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
    <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"/>
  </svg>
  アイコンリンク
</a>

見本2. 右側にアイコン

設定例

<a class="icon-link" href="#">
  アイコンリンク
  <svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
    <path 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"/>
  </svg>
</a>

ホバー状態のスタイル（Style on hover）

.icon-link-hover を追加し、ホバー状態でアイコンを右に移動させるようにする。

見本

設定例

<a class="icon-link icon-link-hover" href="#">
  アイコンリンク
  <svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
    <path 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"/>
  </svg>

カスタマイズ（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 xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
    <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"/>
  </svg>
  アイコンリンク
</a>

--bs-link-* CSS変数を再定義することで、カラーをカスタマイズできる：

見本2. ホバー時にリンクカラーが任意のものに変わる

設定例

<a class="icon-link icon-link-hover" style="--bs-link-hover-color-rgb: 25, 135, 84;" href="#">
  アイコンリンク
  <svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
    <path 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"/>
  </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 xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
    <path 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"/>
  </svg>
</a>