What is a sprite or roll-over and how do they work?
A sprite is made up of multiple images in one file (such as social media icons). The trick is in the CSS, which reveals the portion of the overall file that needs to be revealed such as in a rollover. I’ve used sprites for social media icons quite a bit. Once you get it to work, you can reuse it to save time. If icons change, they can be swapped out so long as the size of the icons remain the same.
Using social media icons as an example, the advantage of sprites to create a rollover effect, is that one file will contain all the icons in the visible and hover state. The rollover is created through CSS by plugging in the coordinates of the icon in the rollover state to reveal it. Hence only one file is called from the server as opposed to each individual icon in its own file, which would have to be called from the server individually. The rollover in this scenario is created through an imageSwap.
What will be the possible benefits of using fonts for your icons? Icon fonts are scalable vector icons that can be customized — size, color, or anything that can be done with CSS. They are great ways of creating more complex CSS transitions with icons – transitions that could not be replicated with images.
What is your favorite trick that he shows in the second article? Personally, I liked the hover effect. It’s pretty standard effect but I prefer something subtle because I wouldn’t want to call too much attention to the effect.
What would you like to use on your own site? Hover
Here’s a great site to help you create a sprite: