How can I use icon from .eps file and load them on my site?

css icons eps sprite-sheet

cyb3rZ · May 4, 2015 · Viewed 34.7k times · Source

I Have

a filefile.eps that I downloaded from http://www.shutterstock.com/ , it looks like this :

enter image description here

I want

to export all those icons into its own piece so that I can use them on my site.

I've tried

doing this manually one-by-one it is very time-consuming, now I'm looking for a better way to export all of them.

I got some questions

Is there any Mac application out there that help me export/slice my file.eps into multiple icon.png file ?

Should I even need to extract them ?

My main goal are :

load them on my website
keep minimum HTTP request
look awesome on retina display devices.

Answer

I'm sure there is more than one way to achieve this kind of task, but this is how I get mine done. Here are my steps :

1. Convert .eps to .png

I did that by open my file.eps in Illustrator, and go to File > Save For Web > Select PNG-8 > Save. You should see it export to your desired destination.

2. Create Sprites Stylesheet

Go to http://www.spritecow.com/

I load my exported file.png, and select any objects, a correspond css code should be automatically generated for me like this :

enter image description here

3. Result

I selected multiple icons that I liked, and display them properly.

Finally, I put together my result : HERE

Hope this answer help someone like me.