Wednesday, November 12, 2014

Creating a custom icon for web site

While there are thousands of great icon sets out there, such as Font Awesome, sometimes you just can't find an icon that you need. In my case, I needed an icon containing the client's logo.

After a fair amount of research, I came up with a process that seems to work fine. I'm documenting it here for my own reference really, but if you find it helpful then let me know.

First up I installed Inkscape which is a free vector editing package for Windows & Mac.

Then I went to https://icomoon.io and click on a random icon - selecting to preview it at 96x96 pixels. I clicked the "Generate SVG/PNG" from the footer menu to download it to my PC.

I opened this .svg file in Inkscape. The purpose of this exercise was just to get a correctly sized template. I then deleted the random icon and used its canvas space to create my own icon.

When I was finished I clicked on Path > Object to Path from the Inkscape menu before then saving it as a .svg file.

I then dragged this .svg file from my PC on to the http://fontello.com/ web site and, assuming it looks right, I clicked the download webfont button which gives you all the files and sample code for using your custom-made icon on a web page.

No comments: