图标链接

使用 Bootstrap 图标或其他图标快速创建样式化的超链接。

此页面上的内容

图标链接帮助程序组件修改了我们的默认链接样式，以增强其外观并快速对齐图标和文本的任何配对。对齐是通过内联 flexbox 样式和默认 gap 值设置的。我们使用自定义偏移和颜色对下划线进行样式化。图标自动调整为 1em 以最佳匹配其关联文本的 font-size。

图标链接假定正在使用 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 变量

自定义图标链接 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>