Иконка-ссылка
Быстро создавайте стилизованные гиперссылки с помощью иконок Bootstrap или других иконок.
Вспомогательный компонент ссылки на иконку изменяет стили ссылок по умолчанию, улучшая их внешний вид и быстро выравнивая любое сочетание иконки и текста. Выравнивание задается с помощью встроенного стиля flexbox и значения по умолчанию gap. Мы стилизуем подчеркивание с помощью пользовательского смещения и цвета. Иконки автоматически имеют размер 1em, чтобы лучше всего соответствовать размеру шрифта связанного с ними текста font-size.
Ссылки на иконки предполагают, что используются Bootstrap Icons, но вы можете использовать любая иконка или изображение, которое вам нравится.
aria-hidden="true", как мы сделали в наших примерах. Для иконок, которые передают значение, предоставьте соответствующую текстовую альтернативу, добавив role="img" и соответствующий aria-label="..." к SVGs.
Пример
Возьмите обычный элемент <a>, добавьте .icon-link и вставьте иконку слева или справа от текста ссылки. Размер иконки автоматически изменяется, он размещается и окрашивается.
<aclass="icon-link"href="#"><svgclass="bi"aria-hidden="true"><usexlink:href="#box-seam"></use></svg> Иконка-ссылка
</a><aclass="icon-link"href="#"> Иконка-ссылка
<svgclass="bi"aria-hidden="true"><usexlink:href="#arrow-right"></use></svg></a>Стиль при наведении
Добавьте .icon-link-hover, чтобы перемещать иконку вправо при наведении.
<aclass="icon-link icon-link-hover"href="#"> Иконка-ссылка
<svgclass="bi"aria-hidden="true"><usexlink:href="#arrow-right"></use></svg></a>Кастомизация
Измените стиль ссылки иконки с помощью наших переменных CSS, переменных Sass, утилит или пользовательских стилей.
CSS переменные
При необходимости измените переменные CSS --bs-link-* и --bs-icon-link-*, чтобы изменить внешний вид по умолчанию.
Настройте transform при наведении, переопределив переменную CSS --bs-icon-link-transform:
<aclass="icon-link icon-link-hover"style="--bs-icon-link-transform: translate3d(0, -.125rem, 0);"href="#"><svgclass="bi"aria-hidden="true"><usexlink:href="#clipboard"></use></svg> Иконка-ссылка
</a>Настройте цвет, переопределив переменную CSS --bs-link-*:
<aclass="icon-link icon-link-hover"style="--bs-link-hover-color-rgb: 25, 135, 84;"href="#"> Иконка-ссылка
<svgclass="bi"aria-hidden="true"><usexlink: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:.2sease-in-outtransform;$icon-link-icon-transform:translate3d(.25em,0,0);Sass API утилиты
Измените ссылки на иконки с помощью любой из наших утилит ссылок для изменения цвета подчеркивания и смещения.
<aclass="icon-link icon-link-hover link-success link-underline-success link-underline-opacity-25"href="#"> Иконка-ссылка
<svgclass="bi"aria-hidden="true"><usexlink:href="#arrow-right"></use></svg></a>
