HTML and CSS Reference
FIGURE 6.13 CSS sprites in action.
as you are displaying a different part of the image in each case. The result is shown
in Figure 6.13 .
MAKING YOUR ICONS MORE BULLETPROOF
In the examples you've seen so far, you have a solid implementation that works
well. The only trouble at this point is that if you are using percentages for your
container widths; the icon can start to look misplaced or become too big for the
containers when the screen gets narrower. To remedy this, you can adopt a few
different approaches, either separately or in combination:
Use min-width to limit the shrinking of the containers to an acceptable
Use Media Queries to serve up some different styling at smaller screen
widths, for example, a smaller version of the image used for the icon. You'll
learn more about media queries in Chapter 8.
Use background-size to constrain the icon to a particular size, proportional
to the container.
The solution I considered for my icon set (see basic-icons-background-size.
html) incorporates a combination of min-width and background-size . Let's go
through it now: You'll first set a min-width on the list: