Content Link icon

Available standalone  ›
Use <i>-helper with Clean HTML without <span>ning
🥷 Emojis <a><i>🥷</i> Text</a>
Favicons <a><i><img src="..."></i> Text</a>
Font Awesome icons <a><i class="fa-..."></i> Text</a>

Or even for:

🥷 very-very-very-very-very-
long-multiline-links

How we made it: /editor/anydigital/pen/019d2b94-5616-75dc-a23e-e111869d5237

PRO example of automatic favicons for 11ty: /build-awesome-11ty/processors/#auto-link-favicons


How it works

/anyblades/blades/refs/heads/main/src/link-icon.css :

a:not(.does-not-exist) /* soft win specificity over Pico's `a[role="button"]` and inner `img:not([height])` */ {
  /* Use inline flex only if link contains an icon */
  &:has(> i) {
    display: inline-flex;
    gap: 0.375ch; /* =3/8 */
    text-wrap: balance;
    overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
  }
  > i {
    font-style: normal;
    float: left; /*                 ✅ Chrome ❌ Safari */
    text-underline-offset: -2em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */

    /* Favicons */
    > img {
      height: 1.25em;
      margin-block-start: calc(-0.25em / 2);
      max-width: none; /* to keep ratio safe */
      display: inline-block; /* for Tailwind CSS Typography */
    }

    /* Font Awesome */
    &[class^="fa-"],
    &[class*=" fa-"] {
      line-height: inherit;
      --fa-width: auto;
    }
    &.fa-lg {
      line-height: normal;
    }
  }
}