SVG sprite icons using CSS background positioning and sizing

[mikehermary]

I am developing a website for a client that uses a SVG sprite. The SVG file contains icons of similar size. The sprite is being displayed using CSS background properties. Some of the icons are part of links and others are for text inputs and lists. You can see how they are used here: link. The issue is affecting positioning and sizing for some of the icons. You can see this in the top search input and the footer navigation in the bottom left. I cannot seem to get the positioning and sizing correct for these icons. I have got it correct for the Facebook and Twitter icons, but similar code is not working for the other sprite icons. I have attached the CSS code below for reference. Any suggestions? Thanks.

.footernav a.has-icon:before {
    content:'';
    display:inline-block;
    width:2.090em;
    height:1.47em;
    margin-right:14px;
    background:url(../images/sprite.svg) no-repeat 0 0;
    background-size:1.407em 8.045em;
    font-size:1.333em
}

.footernav a.sm:before {
    margin-right:0
}

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

.footernav .has-icon.icon-webmap:before {
    background-position:0 -26.679em
}

.footernav .has-icon.icon-sitemap:before {
    background-position:0 -28.751em
}

.footernav .sm:link {
    display:block;
    width:1.34em;
    height:1.36em;
    background:url(../images/sprite.svg) no-repeat 0 0;
    background-size:1.407em 8.045em;
    text-indent:-999em;
    font-size:1.566em
}

.footernav .icon-facebook:link {
    background-position:0 0
}

.footernav .icon-twitter:link {
    background-position:0 -1.474em
}

[I.m.learning]

My internet has been very slow and it takes too long to load any pages; I closed out your pages and it’s taking too long to check your pages out. Maybe someone who has faster internet could see something I can’t.

After I wrote the bottom section, I saw you had a negative positioning. Have you tried to change the positions to positive?

Maybe you have too many has-icon classes and the CSS isn’t rendering them how you want them. Use > to distinguish the inheritance between the different classes. If you notice you do not have the has-icon class in the FB & Twitter styles.

I cannot pull your sprites file to see how you have them; without able to see it, I can suggest you viewing this
https://www.sitepoint.com/use-svg-image-sprites/

I never used sprites, I just used images and loaded when they were called; I gave each one it’s own title and styled it the way you did, except

a[title~=**Your title here***]:after{display:inline-block;width:25px;height:25px;content:” “;background:url(http:******Your URL here******.png);background-size:100%;margin:10px 10px 0 5px!important;vertical-align:bottom;}
[You will have to change BG-size/Margin/V-align each to fit your needs.]

If not try !important

[Beverleyh]

It would be easier for us if you created a minimal demo in codepen.io

Show us just enough markup and CSS (linked to the appropriate sprite) so we can more easily see the specific problem without needing to wade through masses of other CSS/HTML/assets, etc. or poke about in dev tools.

[mikehermary]

Hello,

I have created a basic CodePen demo and have included the link below.

link

Mike

[Beverleyh]

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.

[mikehermary]

Hello Beverley,

Thanks for the help. I now have the icons displaying correctly, but the vertical heights of the text are not centered. You can see it here link. Any ideas on how to fix this? Thanks.

Mike

[Beverleyh]

I’m not really sure what I should be looking at but vertical placement/alignment of text can be influence but the line-height property http://www.w3schools.com/cssref/pr_dim_line-height.asp or the vertical-align property https://css-tricks.com/almanac/properties/v/vertical-align/

If you need more help, please provide a new/updated but reduced demo in codepen.io

[mikehermary]

Hello Beverley,

I have updated the existing CodePen. You will see the text on the right side of the icons is not lined vertically. I have tried working with the line heights, but have so far been unsuccessful. I have also tried using vertical align, but it has failed as well.

link

Mike

[Beverleyh]

I had a quick look on mobile but couldn’t see how you’re using line-height/vertical-align. To be honest there’s still a lot of excess CSS and markup in there that is likely distracting potential helpers – you really have to cut it back to basics to make it easier for us to focus on the critical parts. That said, the different height icons are probably at fault so try positioning them absolutely to pull them out of the flow of the other elements. You can kill 2 birds with one stone and align them vertically too with one of the techniques detailed here https://css-tricks.com/centering-css-complete-guide/ (the ‘vertically > block level > unknown height’ one)

Note that once the icons have been positioned absolutely, the span that holds the text will take up their space as though they aren’t there, so add left margin to give them back breathing room.

[mikehermary]

Hello Beverley,

Thanks for the tips on using absolute positioning on the icons. I was able to bring them and the text to the same vertical height.

Mike

[Author]

Posts