Link icon

Use Blades <i>-helper to wrap emojis, favicons, or simply drop Font Awesome icons inside links. It automatically handles sizing and alignment while preventing underline on icons.


Or even for:

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 
a {
  /* Use inline flex only if link contains an icon */
  &:has(> i) {
    display: inline-flex;
    gap: 0.375ch; /* =3/8 */
    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;
    }
  }
}

Install

Via CDN 
<link rel="stylesheet" href="
  https://cdn.jsdelivr.net/npm/@anyblades/blades@^0.28.0-alpha/assets/link-icon.min.css
">
Prepackaged