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).
Being in SGV format means the icon is actually a font or can be treated just like a font and can be styled using CSS with any feature that can be used on a font. Styling such as bold, border, shadow, size, color, and background can be used. There are even animations for some SVG icons. Keep in mind that some icon sets work together with and are bundled with CSS and JavaScript. CSS tells the font how to look and JavaScript tell it what to do.
If you are using a development environment such as Visual Studio, you may have a font set and a framework like Bootstrap already installed. You may also be able download and store the resources on your site using the links in this article and following the necessary procedure for your particular situation. KRobbins.com is an ASP.net website, so installing a font bundle or framework would involve two main steps. First, storing the CSS, Font, and JavaScript files in the proper folders and second, adding the proper path declaration in the Bundle.config file in the root folder.
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.
Glyphicons
What are Glyphicons?
The free set includes over 250 glyphs in font format from the Glyphicon Halflings set and is included with Bootstrap Framework or as a standalone product. Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As stated in the license, you are required to include a link back to Glyphicons to use these glyphs.
Where to get them
Glyphicons - Download the free version or purchase an expanded icon set of over 800.
Bootstrap - Download the entire framework or just the Glyphicon Halflings.
Path link
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Cheat sheet
Bootstrap's Available Glyphs
Examples
Glyphs are inserted as a CSS class into the opening element of <span> or <i> tag.
HTML
<strong>Unstyled:</strong><br />
<i class="glyphicon glyphicon-apple"></i><br />
<i class="glyphicon glyphicon-cloud"></i><br />
<i class="glyphicon glyphicon-user"></i><br />
<i class="glyphicon glyphicon-thumbs-up"></i><br />
<i class="glyphicon glyphicon-folder-open"></i><br />
<strong>Styled:</strong><br />
<i class="glyphicon glyphicon-apple" style="text-shadow: rgb(128, 128, 128) 3px 3px; color:#ff0000; font-size: 3em"></i><br />
<i class="glyphicon glyphicon-cloud" style="border:1px solid black; background-color: #1d33e4;color:white; font-size: 3em;"></i><br />
<i class="glyphicon glyphicon-user" style="border: .1em solid #a700ff; border-radius: 4px; color: #a700ff; font-size: 2.85em;"></i><br />
<i class="glyphicon glyphicon-thumbs-up" style="border: .1em solid #0000ff; border-radius: 2em; color: #0000ff; font-size: 2.5em"></i><br />
<i class="glyphicon glyphicon-folder-open" style="color:#dc971c; font-size: 2.5em;"></i><br />
Font Awesome
What is Font Awesome?
Font Awesome by Dave Gandy can be described as the iconic font and CSS toolkit. It is completely free and Open Source but the author also has several products in pre-order stages.
Where to get it
http://fontawesome.io - Complete toolkit download or just request a link.
Path link
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Cheat sheet
Dave Gandy's cheatsheet. An amazing amount of clean, clear icons. Keep in mind if your using the Font Awesome CSS you will not need the Unicode.
Examples
Font Awesome icons can be used just about anywhere inserting the CSS class into the opening element of <i> tag. Here are some great examples from the author's website: http://fontawesome.io/examples/
Google Icons
What are Google Icons?
Goolge has created over 900 material system icons and made them available in a variety of sizes and densities. The best way to use these icons on the web is with the icon web font. It's lightweight, easy to use, and hosted by Google Web Fonts by using the link below.
Where to get them
Google Material Icons Guide - A variety of sizes and densities can be downloaded and the icon set is also available as a git repository.
Path link
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Cheat sheet
Google's Material Icons - the icons and their names.
Complete list of names and codepoints.
Examples
Google icons are used by giving the tag a class and inserting either the icon name or code between the opening and closing tag. So <i class="material-icons">face</i> would render this: face If you want to be certain of backward compatibility for older browsers, it is advisable to use numeric character reference as in the examples below. I used similar icons (except the apple) to the ones I used for the glyphicons examples without changing the CSS. I also used the Google CSS textual name for the unstyled icons and the numeric character reference for the styled version.
HTML
<strong>Unstyled:</strong><br />
<i class="material-icons">face</i><br />
<i class="material-icons">cloud</i><br />
<i class="material-icons">person</i><br />
<i class="material-icons">thumb_up</i><br />
<i class="material-icons">folder_open</i><br />
<strong>Styled:</strong><br />
<i class="material-icons" style="text-shadow: rgb(128, 128, 128) 3px 3px; color:#ff0000; font-size: 3em"></i><br />
<i class="material-icons" style="border:1px solid black; background-color: #1d33e4;color:white; font-size: 3em;"></i><br />
<i class="material-icons" style="border: .1em solid #a700ff; border-radius: 4px; color: #a700ff; font-size: 2.85em;"></i><br />
<i class="material-icons" style="border: .1em solid #0000ff; border-radius: 2em; color: #0000ff; font-size: 2.5em"></i><br />
<i class="material-icons" style="color:#dc971c; font-size: 2.5em;"></i><br />
Output
Unstyled:
face
cloud
person
thumb_up
folder_open
Styled:
Unicode Symbols
What is Unicode?
Unicode is an international encoding standard for use with different languages, scripts, and methods of notation by which each letter, digit, or symbol is assigned a unique numeric value that applies across different platforms and programs. Unicode is constantly expanding to include new characters and is maintained by the Unicode Consortium. In some respects, Unicode is the most complicated of the topics in this article because of its use in not only language but the sciences. It may be the easiest to use since you can insert UNICODE almost anywhere, like this: ☕. I only used the SPAN tags below for styling purposes. For this article we will only be using Emoji & Pictograph symbols.
Where to get it
The Unicode Consortium - The primary source of all Unicode information
Path link
There is no link reference needed since Unicode is a standard.
Cheat sheet
Emoji and Pictographs - The files are in PDF format.
Examples
The Unicode number is inserted between the opening and closing elements of a <span> tag as shown in the HTML and code. The styles are the same same as the other icons, so why do some of the Unicode icons look different? And why other details? It is because some of the Unicode icons are pictographs and symbols. Many already have color and some have more detail.
HTML
<strong>Unstyled:</strong><br />
<span>🍏</span><br />
<span>☁</span><br />
<span>👤</span><br />
<span>🖒</span><br />
<span>🗁</span><br />
<strong>Styled:</strong><br />
<span style="text-shadow: rgb(128, 128, 128) 3px 3px; color:#ff0000; font-size: 3em">🍏</span><br />
<span style="border:1px solid black; background-color: #1d33e4;color:white; font-size: 3em;">☁</span><br />
<span style="border: .1em solid #a700ff; border-radius: 4px; color: #a700ff; font-size: 2.85em;">👤</span><br />
<span style="border: .1em solid #0000ff; border-radius: 2em; color: #0000ff; font-size: 2.5em">🖒</span><br />
<span style="color:#dc971c; font-size: 2.5em;">🗁</span><br />
Output
Unstyled:
🍏
☁
👤
🖒
🗁
Styled:
🍏
☁
👤
🖒
🗁
In Conclusion:
Scalable icon creation and use, along with typography are industries unto themselves in the digital world. The beauty of web design must go hand in hand with scalability in this modern environment where people take their devices everywhere and are constantly connected. A web presence being a form of communication, it is counter productive to have your message look pleasing on a computer and unappealing on a smart phone or vice versa.
Please visit the websites mentioned in the article to learn more about this subject. Below are a few links to interesting sites with related information. I welcome your comments.