图标链接
使用 Bootstrap 图标或其他图标快速创建风格化的超链接。
图标链接辅助程序组件修改了我们的默认链接样式，以增强其外观并快速对齐图标和文本的任何配对。对齐方式是通过内联 Flexbox 样式和默认 gap 值设置的。我们使用自定义偏移量和颜色对下划线进行样式化。图标会自动调整为 1em 的大小，以最佳匹配其关联文本的 font-size。
¥The icon link helper component modifies our default link styles to enhance their appearance and quickly align any pairing of icon and text. Alignment is set via inline flexbox styling and a default gap value. We stylize the underline with a custom offset and color. Icons are automatically sized to 1em to best match their associated text’s font-size.
图标链接假设正在使用 Bootstrap 图标，但你可以使用你喜欢的任何图标或图片。
¥Icon links assume Bootstrap Icons are being used, but you can use any icon or image you like.
如果图标纯粹用于装饰，则应使用 aria-hidden="true" 将其隐藏在辅助技术中，就像我们在示例中所做的那样。对于传达含义的图标，请通过在 SVG 中添加 role="img" 和相应的 aria-label="..." 来提供合适的文本替代。
¥When icons are purely decorative, they should be hidden from assistive technologies using aria-hidden="true", as we’ve done in our examples. For icons that convey meaning, provide an appropriate text alternative by adding role="img" and an appropriate aria-label="..." to the SVGs.
示例
¥Example
采用常规 <a> 元素，添加 .icon-link，然后在链接文本的左侧或右侧插入一个图标。图标会自动调整大小、位置和颜色。
¥Take a regular <a> element, add .icon-link, and insert an icon on either the left or right of your link text. The icon is automatically sized, placed, and colored.
<a class="icon-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
<path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/>
</svg>
Icon link
</a><a class="icon-link" href="#">
Icon link
<svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
<path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>
</a>悬停时的样式
¥Style on hover
添加 .icon-link-hover 以在悬停时将图标移至右侧。
¥Add .icon-link-hover to move the icon to the right on hover.
<a class="icon-link icon-link-hover" href="#">
Icon link
<svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
<path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>
</a>定制
¥Customize
使用我们的链接 CSS 变量、Sass 变量、工具或自定义样式修改图标链接的样式。
¥Modify the styling of an icon link with our link CSS variables, Sass variables, utilities, or custom styles.
CSS 变量
¥CSS variables
根据需要修改 --bs-link-* 和 --bs-icon-link-* CSS 变量以更改默认外观。
¥Modify the --bs-link-* and --bs-icon-link-* CSS variables as needed to change the default appearance.
通过覆盖 --bs-icon-link-transform CSS 变量来自定义悬停 transform：
¥Customize the hover transform by overriding the --bs-icon-link-transform CSS variable:
<a class="icon-link icon-link-hover" style="--bs-icon-link-transform: translate3d(0, -.125rem, 0);" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
</svg>
Icon link
</a>通过覆盖 --bs-link-* CSS 变量来自定义颜色：
¥Customize the color by overriding the --bs-link-* CSS variable:
<a class="icon-link icon-link-hover" style="--bs-link-hover-color-rgb: 25, 135, 84;" href="#">
Icon link
<svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
<path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>
</a>Sass 变量
¥Sass variables
自定义图标链接 Sass 变量以修改 Bootstrap 支持的项目中的所有图标链接样式。
¥Customize the icon link Sass variables to modify all icon link styles across your Bootstrap-powered project.
$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
¥Sass utilities API
使用任意 我们的链接实用程序 修改图标链接，以修改下划线颜色和偏移量。
¥Modify icon links with any of our link utilities for modifying underline color and offset.
<a class="icon-link icon-link-hover link-success link-underline-success link-underline-opacity-25" href="#">
Icon link
<svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
<path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>
</a>