How to Create Custom Icons Using Font Awesome

Introduction

This article explains how to use the awesome font icon; how to convert a PNG file to a SVG file. Font Awesome is fully Open Source. You can also contribute your own icons. Font Awesome supports 
Scalable
 Vector Graphics.

Why use Font Awesome?

There are many great reasons to use Font Awesome. The beauty of this is that you can make them as
large or 
small as you like without any breakdown in quality. You will never see the pixelation that you 
would typically see when magnifying an image. Each icon can also be customized. Their 
size, 
color, drop
 shadow, in fact just about anything can be changed with the power of CSS. 

How to use

Step 1:

Create a PNG file for your icon. The PNG file should be greater than 216px*216px for quality icons. You can use 
Photoshop or download an icon PNG file from the internet.

 photoshop

 

Step 2: 

If you have created a PNG file then you will need to convert the PNG file to SVG to import to Awesome Icons. You can use Inkscape software to convert the PNG file to a SVG file. 
Use the following procedure to convert a PNG to SVG file using Inkscape.

  1. Open Inkscape and open the PNG file.
     

  2. Go to the path and then click on "Trace bitmap".

    Inkscape
     

  3. When you click on Trace bitmap a new window of Inkscape is opened then click on "Update" then "Ok" then close it.

    Trace_bitmap
     

  4. Save this file.

    Note: Remove the file extension from the name when you save this file.
     

  5. Open new Inkscape and import the icon SVG file and set the dimensions of the icons.

    Create_SVG


Step 3:

Now you upload the SVG file and create some CSS strips.

Open the Icomoon  page to upload the SVG file. Click on "Import icons".

Import_icon

When you import the SVG icon select the icon.

Select_icon

Go to the footer and click on "Font".

create_strip

Click "Download" to download the Awesome font icon file.

Download_strip

Extract the icomoon file; you can see it in the files.

Package

Now you create a HTML file.

HTML Code

 <!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Awesome fonts icons </title>

<link href="style.css" type="text/css" rel="stylesheet" />

<!--[if lte IE 7]><script src="lte-ie7.js"></script><![endif]-->

<style>

.awesomefonts{float:left;}

.awesomefonts li{list-style:nonefloat:rightmargin-left:15px;}

.x{font-size:20pxcolor:#0591e5;}

.two_x{font-size:30pxcolor:#ff6600;}

.three_x{font-size:40px;color:#0591e5;}

.four_x{font-size:50px;color:#ff6600;}

.five_x{font-size:60px;color:#0591e5;}

.six_x{font-size:70px;color:#ff6600;}

</style>

</head>

<body>

<ul class="awesomefonts">

<li class="icon-user x"></li>

<li class="icon-user two_x"></li>

<li class="icon-user three_x"></li>

<li class="icon-user four_x"></li>

<li class="icon-user five_x"></li>

<li class="icon-user six_x"></li>

</ul>

</body>

</html>


Output:

Awesome_Icon

You can change the color with CSS.
Awesome_Icons_Color