Enlace de ícono
Crea rápidamente hipervínculos estilizados con íconos Bootstrap u otros íconos.
El componente auxiliar de vínculo de ícono modifica nuestros estilos de vínculo predeterminados para mejorar
su apariencia y alinear rápidamente cualquier combinación de ícono y texto. La alineación se establece
mediante el estilo Flexbox en línea y un valor de gap
predeterminado. Estilizamos el subrayado
con un desplazamiento y color personalizados. Los iconos se ajustan automáticamente a 1em
para
que coincidan mejor con el font-size
del texto asociado.
Los enlaces de iconos suponen que se están utilizando iconos de Bootstrap , pero puedes usar cualquier icono o imagen que desees.
aria-hidden="true"
, como lo hemos hecho en nuestros ejemplos. Para íconos que transmiten
significado, proporciona una alternativa de texto apropiada agregando role="img"
y un
aria-label="..."
apropiado a los SVG.
Ejemplo
Toma un elemento <a>
normal, agrega .icon-link
e inserta un ícono a la
izquierda o a la derecha del texto del enlace. El icono cambia de tamaño, ubicación y color automáticamente.
<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>
Estilo al pasar el mouse
Agrega .icon-link-hover
para mover el ícono hacia la derecha al pasar el mouse.
<a class="icon-link icon-link-hover" href="#">
Icon link
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
</a>
Personalizar
Modifica el estilo de un enlace de icono con nuestras variables CSS de enlace, variables Sass, utilidades o estilos personalizados.
Variables CSS
Modifica las variables CSS --bs-link-*
y --bs-icon-link-*
según sea necesario para
cambiar la apariencia predeterminada.
Personaliza la transform
al pasar el mouse sobrescribendo la variable CSS
--bs-icon-link-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>
Personaliza el color sobrescribendo la variable CSS --bs-link-*
:
<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>
Variables Sass
Personaliza las variables Sass del enlace de íconos para modificar todos los estilos de enlaces de íconos en tu proyecto impulsado por 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);
API de utilidades de Sass
Modifica los enlaces de los íconos con cualquiera de nuestras utilidades de enlaces para modificar el color del subrayado y el desplazamiento.
<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>