Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Craig Watson
Craig Watson
27,930 Points

SVG Sprite from IcoMoon is nothing like that in the video?

Hi everyone!

Just had a watch of the video from Guil on the treehouse blog about using IcoMoon to produce SVG sprites and use background position to use them.

Video

Problem is the sprite I'm getting looks nothing like his and the background positions not even close to working correctly :S

Has anyone else experienced this as the interface now compared to January when the blog was posted is different ?

Thanks Craig :)

3 Answers

AR Ehsan
AR Ehsan
7,912 Points
AR Ehsan
AR Ehsan
7,912 Points

I had the same problem!

Craig Watson
Craig Watson
27,930 Points

Hi Abdullah,

The positions do work in the end but I had to play around with the negative numbers... I also couldn't even download it as an icon font :S

hl9
hl9
8,443 Points
hl9
hl9
8,443 Points

Craig, could you please tell me how you got your sprites to show correctly? All I get is four twitter icons in a row.

Thanks, HL

Craig Watson
Craig Watson
27,930 Points

Hi hl9,

I had to change some of the offset values to negative numbers, the best thing i did was open my svg to see the offsets in there and play around with the values from the svg in my css.

The reason mine was so different is that i had made them into a column not a row so i needed to switch round my offsets to.

It was a little hard and confusing at first but well worth it in the end :)

Now i use them all the time.

Craig

hl9
hl9
8,443 Points
hl9
hl9
8,443 Points

Hi again Craig,

I've been fiddling with this for hours and finally got something that worked:

Downloaded SVG with 1 Sprite column, no margins, same as Guil did in his video

Copied sprite.css file into my style.css file

Then, if I wanted to change the background position of the items, I just changed the order of the list items in my index.html file :)

Changed the colors of the icons in the sprite.svg file under fill for each item

What a great feeling to click refresh and see what I wanted to see!