Added in v5.3
View on GitHub
Icon 链接（Icon link）
使用 Bootstrap 图标或其他图标快速创建风格化超链接。
On this page
图标链接辅助组件可修改我们的默认链接样式，以增强其外观并快速对齐任何图标和文本配对。对齐方式通过内联 flexbox 风格和默认的 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-iconlink-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);
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>