Back in the day – alright, about 4 years ago – web designers and developers faced an issue: how to use icons throughout a website without creating tons of tiny images. Images slow sites, are bitmap-based (so can’t be enlarged without loss of quality), are fiddly to make, can’t be re-coloured easily, can’t be animated easily and so on. In short, images were never a good solution for icons. Add to this the upsurge in responsive websites with app-like interfaces and it was clear we needed something better. Enter Font Awesome.
Font Awesome quickly became the go-to solution for webbies, allowing them to include icons within their sites using a cleverly crafted web-font. Web-fonts are scalable (ideal for retina screens and responsive sites) and can be manipulated by CSS just like text. Font Awesome also requires no JavaScript and is Accessibility-minded, so it’s no wonder it has since established itself as the internet’s most popular web-friendly icon set, used by over 70 million sites worldwide.
Take that 16×16 GIF!
[fusion_fontawesome icon=”fa-heart” size=”55px” flip=”” rotate=”” spin=”no” alignment=”right” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” circle=”no” iconcolor=”#e24585″ circlecolor=”” circlebordercolor=”” animation_type=”” animation_direction=”down” animation_speed=”0.1″ animation_offset=””][/fusion_fontawesome]
Why we like it
Aside from its general usefulness, there are a couple of things which make Font Awesome stand out amongst the other web-friendly icon sets and which prompted us to write this blog:
- Font Awesome is a perfect example of something that is both good design in its own right and a very good tool for designers. The icons themselves are well-balanced and attractive, and as part of our designer’s toolkits, will enhance a design through their inclusion.
- It works for print, too! The Font Awesome font can be downloaded and installed on a computer just like a regular font. Not only does this give you the ability to include the icons in your Photoshop web designs, but also in graphic design.
- It’s always evolving. The icon set grows continually and new versions often bring additional functionality and performance gains. Version 5 is on the way, but more on that later…
- It’s free! ‘Nuff said.
[fusion_fontawesome icon=”fa-paint-brush” size=”50px” flip=”” rotate=”” spin=”no” alignment=”right” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” circle=”no” iconcolor=”#e24585″ circlecolor=”” circlebordercolor=”” animation_type=”” animation_direction=”down” animation_speed=”0.1″ animation_offset=””][/fusion_fontawesome]
What you can do with it
The majority of sites we build use Font Awesome. Take a look at the services page on this website. Due to the scalable nature of the icons, they look great large or small, both demonstrated on this page. We also use it in our graphic designs sometimes. Hell, we’ve even used it in our own brochure! We also often use it subtly in our graphic design, to create a variety of different bullets within text.
[fusion_images picture_size=”auto” hover_type=”none” autoplay=”yes” columns=”1″ column_spacing=”0″ scroll_items=”” show_nav=”yes” mouse_scroll=”no” border=”no” lightbox=”no” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=””][fusion_image image=”https://intheboxmktg.wpenginepowered.com/wp-content/uploads/2016/11/font-awesome-example3.jpg” image_id=”1429″ link=”” linktarget=”_self” alt=”” /][fusion_image image=”https://intheboxmktg.wpenginepowered.com/wp-content/uploads/2016/08/brochure-spread2.jpg” image_id=”1369″ link=”” linktarget=”_self” alt=”” /][/fusion_images]
[fusion_fontawesome icon=”fa-line-chart” size=”55px” flip=”” rotate=”” spin=”no” alignment=”right” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” circle=”no” iconcolor=”#e24585″ circlecolor=”” circlebordercolor=”” animation_type=”” animation_direction=”down” animation_speed=”0.1″ animation_offset=””][/fusion_fontawesome]
Kickstarter kicking butt
If there is a criticism of Font Awesome, it’s solely that where it’s used so widely, it can lead to all your sites having the exact same icons. Although the icon range is good (675 currently), it can be limiting where you’re looking for something different. Luckily, Font Awesome 5 is around the corner, promising new icons, duotone versions, thin versions and more.
With FA5 slated for release in May 2017, Dave Gandy and team decided to secure its development through the Font Awesome community using Kickstarter. Their Kickstarter project is a wonderful example of how effective it can be to fund new web technology by marshalling your users to promise money for something that they can all enjoy and will benefit from.
FA5, although still free, introduces a paid Pro licence for the first time, which will provide its users with more icons and more options to play with. Needless to say, we’ll be getting one. In fact, we’re one of many Early Backers of the project.
No-one, including I’m sure Dave himself, could possibly have foreseen how successful FA5’s Kickstarter campaign would be. Here’s a few stats:
- FA5 hit its $30,000 goal in 5 hours
- Within the first day it raised 571% of the goal
- At the time of writing, the current total pledged stands at $452,181, from 14,472 backers.
- They’ve introduced a whole range of stretch goals to continue rewarding the remarkable support FA5 is receiving.
If nothing else, the incredible support FA5 has received demonstrates just how well used and loved Font Awesome is.
So why not visit the Font Awesome 5 Kickstarter campaign. The Early Backer rewards are still available, so you can secure yourself a Pro license for a pledge of just $20. If you haven’t done already, get involved! And if you don’t do anything else today, at least watch the video at the top of the page which is, well, awesome.
We’re proud to be a part of the Font Awesome community, excited to use our Pro license with FA5 and wish Dave Gandy and team luck with the huge list of goals they’ve now got to deliver on!
