CSS Link [fav]icons

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

Without Blades
With Blades' <i>-helper
Clean HTML without <span>ning
🥷 Link with emoji 🥷 Link with emoji <a><i>🥷</i> Text</a>
Multi-line link
with favicon		 Multi-line link
with favicon		 <a><i><img src="..."></i> Text</a>
Link with Font Awesome icon Link with Font Awesome icon <a><i class="fa-..."></i> Text</a>

How we made it ↗  (on Codepen)


How it works 
a {
  /* If link contains an icon, use inline flex */
  &: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 */
  }

  /* Helper to handle [fav]icons in links */
  > 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: calc(-0.25em / 2);
      display: inline-block; /* for Tailwind CSS Typography */
    }

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

PRO-TIP for 11ty: /build-awesome-11ty/processors/#auto-link-favicons

Install

Just Link [fav]icons:

<link href="https://cdn.jsdelivr.net/npm/@anydigital/blades@^0.27.0-alpha/assets/link-icon.min.css" rel="stylesheet" />

Or all-in:

Install CSS blades

Option A. From CDN:

<link href="https://cdn.jsdelivr.net/npm/@anydigital/blades@^0.27.0-alpha/assets/blades.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@anydigital/blades@^0.27.0-alpha/assets/blades.theme.min.css" rel="stylesheet" /><!-- optional -->

Option B. Via npm:

npm install @anydigital/blades

Then import in your .css:

@import "@anydigital/blades";
@import "@anydigital/blades.theme"; /* optional */

Living example: /anydigital/build-awesome-starter/blob/main/_styles/styles.css