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 {
background-size:1.407em;
}
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.