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

[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