圖示連結

使用 Bootstrap 圖示或其他圖示快速建立樣式化的超連結。

此頁面

圖示連結輔助元件修改我們的預設連結樣式，以增強它們的外觀並快速對齊圖示和文字的任何配對。對齊是透過內嵌彈性盒樣式設定和預設的 gap 值。我們使用自訂偏移和顏色來設定底線樣式。圖示會自動調整大小為 1em，以最符合其關聯文字的 font-size。

圖示連結假設使用的是 Bootstrap 圖示，但您可以使用您喜歡的任何圖示或影像。

當圖示純粹是裝飾性的時，應使用 aria-hidden="true" 隱藏它們，就像我們在範例中所做的那樣。對於傳達意義的圖示，請透過將 role="img" 和適當的 aria-label="..." 新增到 SVG，提供適當的文字替代方案。

範例

使用一般的 <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 變數

自訂圖示連結 Sass 變數，修改 Bootstrap 驅動專案中所有圖示連結的樣式。

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>