Great for visual indications, icons can add just enough interest to otherwise plain sites.

Traditionally, Developers would use image files (like .gif, .jpg, or .png) to display in their markup.  The code for a button with some text and an icon might have looked something like this:

<button>
   <img src="path_to_my_icon/icon.png"> Click me!
</button>

Of course, that “icon.png” file has to be created in a Paint program, then uploaded to the site – two things that take time and manual effort.

Fast forward to today and there are some other cool options available now (and currently free to use)!

 

Pure CSS

Using CSS pseudo-classes, like :before and :after, this Developer has created a set of icons using nothing but CSS.  Very inventive.  Find out more here:

http://nicolasgallagher.com/pure-css-gui-icons/demo/#non

 

Font Awesome

This one is, well, awesome!  It is a huge set of icons available on GitHub.  Here are some links:

Main product  page: http://fortawesome.github.io/Font-Awesome/
Visual list of icons: http://fortawesome.github.io/Font-Awesome/cheatsheet/

And remember that button example earlier in the article?  Well with font-awesome, the code could look something like this:

<button>
   <i class="icon-repeat"></i> Click me!
</button>

There are other classes that font-awesome adds to the mix that makes it so that the icons can do a number of things.  For example:

  • Scale relative to the associated text
  • Color using regular CSS
  • Rotate and spin
  • Overlap icons on top of each other to make for even cooler icons

Read up more on the example page: http://fortawesome.github.io/Font-Awesome/examples/

 

Glyphicons

These icons are provided to go with the Bootstrap framework.  They work similarly to FontAwesome – here is how the example code at the top would look using Glyphicons

<button>
   <span class="glyphicon glyphicon-random"></span> Click me!
</button>

The icons and examples are available here: http://getbootstrap.com/components/#glyphicons

 

Dashicons

If you happen to be a WordPress user, know that it comes with an icon package too.  It’s a real pain finding a list of the icons – but I was able to find a decent one here: https://developer.wordpress.org/resource/dashicons.