Icon link

.icon-link aligns an icon and link text inline using flexbox, with a configurable gap between them. The underline is offset and colored using CSS variables. Icons are automatically sized to 1em to match the surrounding text.

The helper is designed around Chassis CSS Icons but works with any inline SVG or icon font.

Example

Add .icon-link to an <a> element. The icon can be placed before or after the link text:

<a class="icon-link" href="#">
  <svg class="icon" aria-hidden="true"><use href="#info-circle-solid"></use></svg>
  Icon link
</a>

<a class="icon-link" href="#">
  Icon link
  <svg class="icon" aria-hidden="true"><use href="#arrow-right-solid"></use></svg>
</a>

Style on hover

.icon-link-hover shifts the icon on :hover using a CSS transform, providing a directional motion cue.

<a class="icon-link icon-link-hover" href="#">
  Icon link
  <svg class="icon" aria-hidden="true"><use href="#arrow-right-solid"></use></svg>
</a>

Customization

Icon link appearance is controlled through CSS variables and utility classes.

CSS variables

The --cx-link-* and --cx-icon-link-* CSS variables control default styling. --cx-icon-link-transform customizes the hover transform:

<a class="icon-link icon-link-hover" style="--cx-icon-link-transform: translate3d(0, -.125rem, 0);" href="#">
  <svg class="icon" aria-hidden="true"><use href="#info-circle-solid"></use></svg>
  Icon link
</a>

The link color is overridden via --cx-hover-color-rgb:

<a class="icon-link icon-link-hover" style="--cx-hover-color-rgb: 25, 135, 84;" href="#">
  Icon link
  <svg class="icon" aria-hidden="true"><use href="#arrow-right-outline"></use></svg>
</a>

Utilities

Icon links work with link utilities for underline color and offset customization:

<a class="icon-link icon-link-hover link-success link-underline-success link-underline-opacity-25" href="#">
  Icon link
  <svg class="icon" aria-hidden="true"><use href="#arrow-right-outline"></use></svg>
</a>

CSS

.icon-link uses flexbox for alignment; .icon-link-hover applies a CSS transform on interaction.

.icon-link {
  display: inline-flex;
  gap: $icon-link-gap;
  align-items: center;
  text-decoration-color: to-opacity(var(--link-main-color), var(--link-opacity, .5));
  text-underline-offset: $icon-text-underline-offset;
  backface-visibility: hidden;

  > .icon {
    --icon-color: currentcolor;
    flex-shrink: 0;
    width: $icon-link-icon-size;
    height: $icon-link-icon-size;
    @include transition($icon-link-icon-transition);
  }
}

.icon-link-hover {
  &:hover,
  &:focus-visible {
    > .icon {
      transform: var(--icon-link-transform, $icon-link-icon-transform);
    }
  }
}

Sass variables

Sass variables set the default gap, icon size, and hover transform for all icon links.

$icon-link-gap:               .375rem;
$icon-text-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);