項目
アイコンリンクヘルパーコンポーネントは、デフォルトのリンクスタイルを変更して見た目を良くし、アイコンとテキストのペアを素早く整列させます。整列はインラインフレックスボックススタイルとデフォルトのgap値で設定します。下線はカスタムオフセットとカスタムカラーでスタイリングします。アイコンのサイズは自動的に1emに設定され、関連するテキストのfont-sizeに最適にマッチします。
アイコンのリンクは、Bootstrapアイコンが使用されていることを前提としていますが、お好きなアイコンや画像を使用することができます。
アイコンが純粋に装飾的な場合は、例のように
aria-hidden="true"を使用して、補助技術からアイコンを非表示にする必要があります。意味を伝えるアイコンの場合は、SVGにrole="img"と適切なaria-label="..."を追加して、適切なテキスト代替を提供します。
例
通常の<a>要素に.icon-linkを追加し、リンクテキストの左または右にアイコンを挿入します。アイコンは自動的にサイズ、配置、色付けされます。
<a class="icon-link" href="#">
<svg class="bi" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
Icon link
</a><a class="icon-link" href="#">
Icon link
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
</a>ホバー時のスタイル
.icon-link-hoverを追加して、マウスオーバー時にアイコンを右に移動します。
<a class="icon-link icon-link-hover" href="#">
Icon link
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
</a>カスタマイズ
リンクCSS変数、Sass変数、ユーティリティ、またはカスタムスタイルを使って、アイコンリンクのスタイルを変更します。
CSS変数
必要に応じて--bs-link-*と--bs-icon-link-*のCSS変数を変更し、デフォルトの外観を変更してください。
--bs-icon-link-transformCSS変数をオーバーライドして、ホバーのtransformをカスタマイズします：
<a class="icon-link icon-link-hover" style="--bs-icon-link-transform: translate3d(0, -.125rem, 0);" href="#">
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"></use></svg>
Icon link
</a>--bs-link-*CSS変数をオーバーライドして色をカスタマイズします：
<a class="icon-link icon-link-hover" style="--bs-link-hover-color-rgb: 25, 135, 84;" href="#">
Icon link
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
</a>Sass変数
アイコンリンクのSass変数をカスタマイズして、Bootstrapを使用したプロジェクト全体のアイコンリンクのスタイルを変更します。
$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
下線の色やオフセットを変更するためのリンクユーティリティを使用して、アイコンのリンクを変更します。
<a class="icon-link icon-link-hover link-success link-underline-success link-underline-opacity-25" href="#">
Icon link
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
</a>