In a previous article I discussed using Unicode as icons for the numbers and bullets in ordered and unordered lists. I was going to do a follow up article on Glyphicons, but in doing the research, the icon topic in general led to an expansion of this article into discussing four free methods of obtaining and using icons for your website. There are many approaches to getting and using icons, some are free and some are licensed and cost money. By free, I am usually referring to some type of open source license. Open source typically means you can use it personal or commercial, but you can't resell it. It is important to follow the license agreement. Usually including a link to the source is either required or at least a good way to say, "Thank you!" I like free!
Depending on how they are used and where they originate, these icons may also be referred to as glyphs, pictographs, sprites, Unicode Symbols, and probably some other names I am not aware of.
A few years ago, icons were made of bitmap images that were usually either 16x16 or 32x32 pixels. The problem with bitmap images is they do not do well changing size. They are not scalable. Modern websites need to be scalable on screens ranging from a large computer screen to a phone. If you view a website on any device, from a large screen TV to a smart phone you should see sharp, clear text and icons on any screen. Good icons are created in Scalable Vector Graphics format (SVG).
That being said, for the purposes of this article we are going to use a path declaration only (no downloading necessary) and allow the resources we use to be hosted elsewhere. If you would like to play along, you can create a simple HTML page to add some examples to. Don't forget to add the path link to the <head> section of your page. I have also included a link to a cheat sheet for each resource. Cheat sheets are helpful because it is impossible to remember all those icon names. They also help you choose just the right icon for each situation.
Let's look at four types of icons; where to get them, how to access them on your webpage, and how to use them. We'll look at each of them both plain with no CSS and with some styling. The styling will be somewhat over the top, just to show that you have lots of options with these font sets.