Enlace de ícono

Crea rápidamente hipervínculos estilizados con íconos Bootstrap u otros íconos.

😎 Esta traducción es parte del proyecto esdocu.com.

En esta página

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.

Cuando los íconos son puramente decorativos, deben ocultarse de las tecnologías de asistencia usando 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.

Enlace de ícono

html

<a class="icon-link" href="#">
  <svg class="bi" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
  Icon link
</a>

Enlace de ícono

html

<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.

Enlace de ícono

html

<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:

Enlace de ícono

html

<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-*:

Enlace de ícono

html

<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.

scss/_variables.scss

$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.

Enlace de ícono

html

<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>