How to create icons like font awesome

Question

I am new to web development. And in my sample project to get icons I have included the font-awesome plugin (http://fontawesome.io/icons/). And I can select all sort of icons available. But I have two three project specific images like the project logo.

Question 1: How can I convert project specific images (png) to icons like "font-awesome"

Question 2: I searched a little and then found that the are nothing but files with svg extension. So, if I convert the images that I already have in SVG format will that be sufficient.

Question 3: So, once I create SVG icons will I be able to apply the CSS styling as I apply on "font-awesome" icons.

I am new to all this. Please guide me.

Answer 1

Question 1: How can I convert project specific images (png) to icons like "font-awesome"

link

A png is a bitmap image style and an SVG is a vector-based graphics design which supports bitmaps so it's not as if it would convert the image to vectors, just an image embedded in a vector-based format. You could do this using http://www.inkscape.org/ which is free. It would embed it, however it also has a Live Trace like engine which will try to convert it to paths if you wish (using potrace).

Question 2: I searched a little and then found that the are nothing but files with svg extension. So, if I convert the images that I already have in SVG format will that be sufficient.

Yes

Question 3: So, once I create SVG icons will I be able to apply the CSS styling as I apply on "font-awesome" icons.

You could add it to the font-awesome library manually. On the other hand, instead of pulling out your hair doing it, you should use an online tool that helps you create a custom library for your icons. I've used Icomoon, and flaticon with success in the past.