How to use Icon Ninja css sprites generator

About Icon Ninja css sprites generator

As we all know, An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth. So, after collecting so many icons from Icon Ninja, this free online tool can help you generate css sprites. it aims to make css sprites as easist as possible. this tool is totally based on HTML5 canvas. So it won't work in IE8, IE9, IE10(not test), IE11(not test).

How to use?

When we collect many favorite icons from Icon Ninja, then open the css sprites generator page, the "Drag & Resize Icons" function is the default mode, you can easily drag every icon in the canvas to adjust position.

Also, you can easily resize every icon to its proper size, for png icons, the max width and height are their nature width and height, for vector icons(svg icons), there is no max width and height limited. But when we resized the icon, how can we resize it to its original width and height? just by double clicking it. if we want to delete one icon, use your mouse right button to click it, then click "OK".

if you have more sprite images want to merge with these icons, just click the "import" button to import another images.

When we adjust every icon to its best size and position, then click "Select sprite", the icons will be converted to a canvas, then you can use your mouse drag to get every icon's width, height and background-position. For retina displays you can click the "2*" button to set retina mode, also you can click "%" button to show background-position in percentage.

when all are done. click the "Download Png Sprite" button to export the merged icons image. also you can embed the base64 code into your css code just by clicking the "Copy Base64 Code", the base64 code of the sprite will copy into your clipboard.