Announcing Font Awesome CDN

You know, I have one simple request. And that is to have sharks with frickin’ laser beams attached to their heads!

Greetings, Font-Awesome-ers! Today, we’re super excited to announce the beta release of Font Awesome CDN:

• Get icons on your site. Fast. With a single line of code, your site gets access to every Font Awesome icon and our full CSS toolkit. Icons are loaded from a cached version of the icon font files and CSS, served up by our awesome friends at MaxCDN.
• Easy upgrades. Since each site gets a unique embed code, you can easily upgrade your site to the latest version of Font Awesome, all without even pushing code. Easy peasy.
• Asynchronous icon loading. Font Awesome CDN’s JS leverages the excellent, open-source Web Font Loader, courtesy of Typekit and Google. Icons served up by the CDN load in the background so your site loads faster. Additionally, you’ll get all sorts of awesome CSS and JS events to build on top of to make sure your UI looks awesome before and after Font Awesome loads.
• Auto-(ish)-accessibility. See below.

Auto-(ish)-accessibility

Designing and developing your site with accessibility in mind can be challenging, but making your icons accessible is extremely important. And remembering the exact markup for each case can also be tough. We’re making that easier.

Using Font Awesome CDN, you only need to remember 2 things (arguably just one) to make your site more accessible.

1. If your icon is just for decorative purposes, you don’t have to do anything at all. Our JS takes it from there.
2. If your icon has semantic meaning, you just need to provide an accurate title attribute on your inline icon element. Again, our JS will do the rest.

Decorative Icons

Here’s what the Font Awesome CDN’s JavaScript is doing for purely decorative icons. Every element with the base Font Awesome class automatically has the aria-hidden attribute set to true. That means that this:

<i class="fa fa-camera-retro"></i>

Becomes this:

<i class="fa fa-camera-retro" aria-hidden="true"></i>

Since the icon is purely for decorative purposes, it gets hidden from screen readers.

Semantic Icons

For icons with semantic meaning, Font Awesome CDN’s JavaScript uses the title attribute you’ll set directly on your icon element to properly set screen reader text directly after. We also set the aria-hidden attribute to true on the icon element. That means that this:

<button class="btn btn-default">
  <i class="fa fa-cog" title="Settings"></i>
</button>

Becomes this:

<button class="btn btn-default">
  <i class="fa fa-cog" title="Settings" aria-hidden="true"></i>
  <span class="sr-only">Settings</span>
</button>

Since the icon has semantic meaning (in this case an icon used as a visual representation for “Settings”), we’re adding screen-reader-specific fallback text with the title you’ve specified.

We’re calling it “auto-(ish)-accessibility” because we know that we still have more work to do to make icon accessibility easier for developers. But this first pass makes it easier for you to make your sites more accessible for all of your users!

Try it out!

Want to give it a spin? Head on over to the Font Awesome CDN and try it out!

We’d love your feedback and thoughts on this beta release. And remember you can always use Font Awesome in all of the old ways, too!