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

[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.