Where to start.
I guess the first thing is to discuss the difference between bitmap and vector images. A bitmap image is a file with a set of instructions on how to layout pixels (color, position, etc). A vector image is a file with a set of mathematical equations for the shape of an image (like this!). If you zoom in on bitmap images, things start to look “pixelated” because there’s a fixed level of detail in the file. If you zoom in on a vector image, things will always look smooth, because no matter how close you get the equations will re-render an image to that level of detail.
Why am I telling you this?
- Because fonts are vector (like when you increased the size of a font it doesn’t become pixelated).
- You can make your own fonts.
- You can make a font character a symbol instead of a letter of the alphabet (whuzzzup windings!)
- Unlike bitmap images, which require an image editor, you can edit the color and size of icon fonts on the fly which is awesome! CHECK IT OUT!
How to implement
Before you implement you gotta find an appropriate icon font. There are a lot of cool ones! Here are some examples
- Since users of your website won’t have your specific icon font on their computer, you must insert a call to the icon font you’ve chosen either with an @fontface or a link to a font in the meta.
- From here you have two options; either include the character reference in your HTML markup (somewhat frowned upon because its meaningless markup), or in a before/after pseudo-class with the character reference in the content property.
- Make sure you call the appropriate font in the element style and there you have it!
Here's a video if you're interested!
Why it’s Advantageous
- You can reduce the size of webpages because equation instructions are (generally) less immense than pixel instructions
- You can “sprite” your fonts. You can create custom fonts with all of your icons AND an alphabetical font. WHOA!
- They are incredibly easy to edit and customize, which saves time and resources.
Drawbacks
- Unless you add a character to your HTML markup (which raises style vs. meaningless markup issues), they can only be implemented in a before or after pseudo class, which, at the time of this article, do not have animated transition support in WebKit /WTF, WebKit? Do you even lift?!).
TLDR; You can’t make font icons’ hover animations smooth in chrome safari and ie 9 and before, using preferred methodology. - Font degradation is an issue with web browsers and OSes face. Check out this article on font rendering.
- Lose the alt text, which is nice for Accessibility/SEO, so it should only be used for stylistic elements, or use an attribute like long description (which is on the W3C chopping block).