What is Font Awesome and What is an Icon Font Anyway?

Font Awesome is a font and icon toolkit based on CSS and Less. As of 2020, Font Awesome was used by 38% of sites that use third-party font scripts, placing Font Awesome in second place after Google Fonts.

Font Awesome is free and open source, although they have more recently moved to offering 'Pro' premium packages which give you access to greater varieties of icons. It was originally designed to work with Bootstrap, but it works well with all frameworks. To use Font Awesome icons, you’ll have to use @fontface and put them inside an HTML element such as an < i > tag.

There are various different ways that you can get the Font Awesome icons on your site. They show code snippets to help you understand how to add Font Awesome icons to your site. Font Awesome also provides a bunch of great tips to help you get started with getting them on your site. To get started with Font Awesome, head over here and learn how to integrate their icons in your site. It's thankfully a lot simpler and easier than you might think!

Icon fonts are fonts that contain symbols and glyphs instead of letters or numbers. They’re popular for web designers since you can style them with CSS the same way as regular text. Also, since they’re vector’s they’re easily scale-able. They’re small, so they load quickly and (bonus!) they’re supported in all browsers. Usually icon fonts are only one color and they’re made to follow a grid, like 16px by 16px or 32x32.

Any CSS3 effect looks pretty good on a retina display. Icon fonts are super easy to manipulate with CSS3. Icon fonts are a pretty simple way to workaround for dealing with responsive design. It’s extremely simple to have a text render a different size for different viewport sizes, but it’s much more difficult to resize images. It’s also simple to change their color or add a shadow to an icon font's shape.

There are a few downfalls to using icon fonts. For one, while you can change their color, you can't use more than one color. Simple, clean, monochromatic designs are popular right now, so that's not a huge issue, but it's still something to be aware of. The other issue is with accessibility. While it's pretty simple to make the font icons accessible by putting them in the aria class, it's something that should be remembered. You can get icon fonts from a bunch of different places. Three of the most popular are Entypo, Font Awesome, and IcoMoon.