Tiling web assets (sprites) using montage

I’m updating a few sites to include some social media links, but finding nice icons is tough. There are lots of free icon sets on DeviantArt, and one I found is pretty great!

http://robby-designs.deviantart.com/art/Socialcircles-Free-social-icons-circular-347921678

Unfortunately, the assets all come in separate files. This makes it easy to use right away, but if you want to support all of them, it’s a little inefficient. So I decided to combine the images using a linux tool called montage.

montage -adjoin *.png -background none -size +42+42 -geometry +1+1 montage.png

The images I have are 42px by 42px and transparent. This line will tile the images inside the folder, assuming all the images are +42+42 and leaving a 1px by 1px gap between them.

This is all well and good, now I’ve got a nicely tiled image:

montage.png
Transparent with white icons. Not easy to see…

But how do I use this? Sprites! In the HTML I want something simple so it’s easy for me to add or adjust the icon.

<a class="social-media wordpress" href="https://eyeofmidas.wordpress.com"></a>

Then I just add in a a bit of css styling…

.social-media {
    width: 42px;
    height: 42px;
    display: inline-block;
    background-image: url('../images/social_media_sprite.png');
}
.social-media.wordpress { background-position: -177px -221px;}

And presto! I can slice out any icon from the spritesheet and add it to my page with a simple classname.

The entire spritesheet and css file can be found here.

Advertisements
Tiling web assets (sprites) using montage

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s