The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS SVG sprite icons using CSS background positioning and sizing Reply To: SVG sprite icons using CSS background positioning and sizing


First off, this is making the icons slightly disproportionate;

.footernav .sm:link {
    background-size:1.407em 8.045em;

If you just use the first value (relating to width) the second value (height) will default to auto. This will make perfectly proportionate icons;

.footernav .sm:link {

The next thing I see is this (for the contact icon);

.footernav .has-icon.icon-contactus:before {
  background-position: 0 -3em

It looks like the Y axis offset should be a bit smaller (to make it sit a little lower). Maybe -2.95em (with proportionate icons) or -2.75em with your current disproportionate ones.

Then it’s just a case of lining up the background positions (Y axis) for the rest.

These are massively off;

.footernav .has-icon.icon-webmap:before {
  background-position: 0 -26.679em;
.footernav .has-icon.icon-sitemap:before {
  background-position: 0 -28.751em

(What I’m taking to be) Your paper map/sitemap icon sits directly below the contact one in the SVG, so I’d expect the Y axis offset for that to be more like -4em. And the webmap icon to be more like -5.5em

Watch out for the height here though;

.footernav a.has-icon:before {
  height: .98em;

Your SVG icons aren’t all the same height so you’ll need to specify individual heights for each one otherwise the space wont be big enough to accommodate them.