Fallback to CSS when JavaScript is disabled

We recently had a Font Awesome CDN user ask us if there was a way to fallback to CSS-only when using an embed code.

While asynchronous loading and auto-accessibility will not work if JavaScript is disabled that’s no reason to keep the icons from showing up. We can do better.

If you haven’t heard of or tried our free CDN product you can register with us and get a brand new embed code of your own to play with by going to https://cdn.fontawesome.com.

Here is a quick example of how you can keep icons working even if JavaScript is disabled.

Check it out http://s.codepen.io/robmadole/debug/GNKELO

The <noscript> section is the trick.

We can see here that a simple <noscript> block here does exactly what we need. This is an old trick but still a good one.

Just replace the “.js” with “.css” for your own embed code and test it out. Chrome is the easiest to test as you can fire up the Developer Tools, go to settings, and check the “Disable JavaScript”.