Using CSS3, developers can add icons to a website without using images. The way to accomplish this is to locate a font that contains icons and using the CSS3 @font-face rule, or by using another font-loading method - requiring Javascript - to load the font. (Of course, you will need to ensure that you have permission to use the font on the website.) However, this method is only supported with browsers that use CSS3 and have Javascript enabled to read the font, so it may not work in all browsers.
The advantages of using this method include not being required to maintain icons in image files and potentially quicker loading times, depending on the size of the image file containing the icon and the size of the file containing the font.
Disadvantages include the inability to use multiple colours as the icon, as the icon is rendered as a vector font.
Others have discussed this topic on the following websites below:
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-ever-thought-about-using-font-face-for-icons/
http://somerandomdude.com/2010/05/04/font-embedding-icons/
Leave a comment