Added in v5.3
View on GitHub
Icon link
使用 Bootstrap 图标或其他图标快速创建风格化的超链接。
On this page
icon link 助手组件修改我们的默认链接样式，以增强其外观并快速对齐任何图标和文本配对。 对齐是通过内联柔性盒样式和默认的gap值设置的。 我们使用自定义偏移量和颜色设置下划线的样式。 图标的大小自动调整为1em，以最佳匹配其关联文本的font-size。
图标链接假定是使用Bootstrap Icons，但您可以使用任何您喜欢的图标或图像。
当图标纯粹是装饰性的时，应该使用
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>