ProgrammingJavascriptCareerProductivityGadgetsASP.NETWeb Design

Font Awesome has changed the way that I build websites

Written by
Published on
Modified on
Filed under
Font Awesome has changed the way that I build websites

I don't get paid by Font Awesome, but after I hype them up, they will at some point. Font Awesome has changed the way that I build websites since I began to use the font framework earlier last year. You see, if you've been around the web development game for a while, then you know that icons aren't the most entertaining thing to work with. You normally have to create some type of sprite sheet, and then in your CSS, you have to position everything accordingly and precisely. It's normally a somewhat time-consuming task and I personally save it for last on most projects.

Or you can go the other route of using small images for your icons. Not a bad method per say, but it makes it difficult to manage. And you're essentially loading more files each and every time you want to choose an icon. Which, if you are building some type of admin or dashboard, will quickly add up. But these are prices that one is willing to pay in order to get the job done. Or at least they were.

With FontAwesome, you simply include the fonts in your home directory and add the appropriate link tag to your CSS file and you are good to go. Adding a font icon is as simple as this:


<span class="fa fa-car fa-fw"></span>

Fonts have never been this fun and that is the first time that I have made that statement.

No more caching issues

Due to the previous methods mentioned in using icons in the past, I had to be somewhat careful with my icon names and CSS files, because of caching. Every developer knows that caching is a big deal in production code. It's no one's fault. If we want quicker websites, then we need to cache files. And if we update said static files, then we need to clear the cache.

Well, with FontAwesome, that problem is non-existent. At least as far as icons are concerned. I can now freely update icons all day long without having to worry about setting expire dates or appending version strings to CSS files.

Not only does this save developer time, but it also gives you much more freedom to play around with the design. You can change font icon sizes, colors and many other CSS attributes on the fly without having to go back and worry about browser compatibility issues. So in a way, it really does expand your capability to design more freely.

It has a fantastically robust library

I've yet to encounter an issue where I could not find a particular icon that I have been looking for. And I require some pretty random icons at times.

Where else can you find an icon for a stethoscope.

There are 675 different icons packaged into a single font and they are scalable vector icons, which means you can alter their size and color and shadow on the fly by changing to the appropriate class. And if you so wish, you can even stack up icons to make new icons! That one is for the more advanced icon practitioner, but the possibilities though.

It's finally fun to add icons

Maybe I'm overdoing it (I'm not) but I thoroughly enjoy each time that I add a font to a page. It gives it an immediate certain charm and it takes an average of 5-7 seconds to do so.

That took seconds to type and to render. It's semantically as close to perfect as you can get. I didn't have to go and look up what the class name for "car" or "cube" was. It's exactly what you expect it to be, 'car' and 'cube'. And this is a big part of what makes Font Awesome such a fun tool to use. It reduces the trivial and repetitive aspects of web development which will always undoubtedly be there.

A big reason why this is huge is because the least amount of time is spent on repetitive tasks, the more time there is to spend on more creative tasks. This offset literally changes the way that a product can be built and the final outcome.

It's FREE

What other reason is there for not using it? It's 100% free to use for most purposes. If you are going to be printing designs or shirts perhaps, then getting their license would be the route to take. But other than that, you are getting thousands of icons for free to use on your projects. So really there is no reason not to use it or to even not have it set up on your websites just in case you ever feel like adding a icon.

FontAwesome is the type of technology that I find we need the most of these days. They helped to solve a problem that many developers out there face in the simplest way possible. They didn't set out to reinvent the way that JavaScript works or to make it so that CSS can have for loops. They took on icons and ran with it. And they did a fantastic job.

This post isn't completely about hyping up a product that's used on 10's of millions of websites. The hype is there and it speaks for itself. No, this post was more about emphasizing how a simple technology can change the way that we create technology as developers. It is about turning a "pain point" into a "fun point", which is no easy task. And it makes one wonder what else we can do this with, even in a non-technical sense. Maybe even in our day to day lives. How we can simplify things in order to get even more use and more fun out of them.

Many times, we think the other way around. We believe that the more complex and feature-filled something is the more use and the more finance it will bring in. And I think Font Awesome is a great example of how we can just take things down one notch and enjoy it for its simplicity .

Walter Guevara is a software engineer, startup founder and currently teaches programming for a coding bootcamp. He is currently building things that don't yet exist.

Comments

No messages posted yet

Developer Poll

Q:

Stay up to date

Sign up for my FREE newsletter. Get informed of the latest happenings in the programming world.

Add a comment

Keep me up to date on the latest programming news
Add Comment

Stay up to date

Get informed of the latest happenings in the programming world.

No thanks