O'Reilly logo

Sass and Compass Designer's Cookbook by Bass Jobsen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Using icon fonts

In this recipe, the usage of icon fonts for your projects is discussed. As the name suggests, icon fonts are sets of icons defined as a font. Icon fonts can replace image icons in your projects. The main reason for using icon fonts instead of images and the reason they are discussed here is that icon fonts, just like any normal font, can be fully manipulated with CSS. In your project, you can set the size, color, and shadows of the used icon fonts with Sass. The primary reason for using icon fonts is to benefit the load time of your website; similar to sprite images, but with more styling options, only one HTTP request is needed to load them all. Icon fonts will look good on different resolutions and displays too. In this recipe, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required