Added in v5.3
在 GitHub 上查看
图标链接(Icon link)
使用 Bootstrap 图标或其他图标快速创建风格化的超链接。
当前页
图标链接帮助程序组件修改我们的默认链接样式，以增强其外观并快速对齐图标和文本的任何配对。对齐方式通过内联弹性框样式和默认的 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-transform CSS变量来自定义悬停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);
Utilities
使用任何 我们的链接实用程序修改图标链接，以修改下划线颜色和偏移量。
<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>