アイコンリンク

Bootstrapアイコンまたはその他のアイコンを使用して、スタイリッシュなハイパーリンクをすばやく作成します。

このページの内容

アイコンリンクヘルパーコンポーネントは、デフォルトのリンクスタイルを変更して外観を向上させ、アイコンとテキストのペアをすばやく配置します。配置は、インラインフレックスボックススタイリングとデフォルトのgap値によって設定されます。カスタムオフセットとカラーを使用して下線をスタイリングします。アイコンは、関連付けられたテキストのfont-sizeに最適に一致するように、自動的に1emにサイズ変更されます。

アイコンリンクはBootstrapアイコンが使用されていることを前提としていますが、任意のアイコンまたは画像を使用できます。

アイコンが純粋に装飾的なものである場合、例で行ったように、aria-hidden="true"を使用して支援技術から非表示にする必要があります。意味を伝えるアイコンの場合は、SVGにrole="img"と適切なaria-label="..."を追加することにより、適切な代替テキストを提供します。

例

通常の<a>要素を取得し、.icon-linkを追加して、リンクテキストの左右どちらかにアイコンを挿入します。アイコンは自動的にサイズ変更、配置、色付けされます。

アイコンリンク

html

<a class="icon-link" href="#">
  <svg class="bi" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
  Icon link
</a>

アイコンリンク

html

<a class="icon-link" href="#">
  Icon link
  <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
</a>

ホバー時のスタイル

ホバー時にアイコンを右に移動するには、.icon-link-hoverを追加します。

アイコンリンク

html

<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-transform CSS変数をオーバーライドすることにより、ホバーtransformをカスタマイズします

アイコンリンク

html

<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変数をオーバーライドすることにより、色をカスタマイズします

アイコンリンク

html

<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変数

Bootstrapを搭載したプロジェクト全体のすべてのアイコンリンクスタイルを変更するには、アイコンリンクSass変数をカスタマイズします。

scss/_variables.scss

$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

下線の色とオフセットを変更するためのリンクユーティリティを使用して、アイコンリンクを変更します。

アイコンリンク

html

<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>