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 an 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 an SVG file. 
 
Use the following procedure to convert a PNG to an 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 an HTML file.
 
HTML Code
  1. <!DOCTYPE html>  
  2. <html>  
  3.    <head>  
  4.       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
  5.       <title>Awesome fonts icons </title>  
  6.       <link href="style.css" type="text/css" rel="stylesheet" />  
  7.       <!--[if lte IE 7]><script src="lte-ie7.js"></script><![endif]-->  
  8.       <style>  
  9.          .awesomefonts{float:left;}  
  10.          .awesomefonts li{list-style:none; float:right; margin-left:15px;}  
  11.          .x{font-size:20px; color:#0591e5;}  
  12.          .two_x{font-size:30px; color:#ff6600;}  
  13.          .three_x{font-size:40px;color:#0591e5;}  
  14.          .four_x{font-size:50px;color:#ff6600;}  
  15.          .five_x{font-size:60px;color:#0591e5;}  
  16.          .six_x{font-size:70px;color:#ff6600;}  
  17.       </style>  
  18.    </head>  
  19.    <body>  
  20.       <ul class="awesomefonts">  
  21.          <li class="icon-user x"></li>  
  22.          <li class="icon-user two_x"></li>  
  23.          <li class="icon-user three_x"></li>  
  24.          <li class="icon-user four_x"></li>  
  25.          <li class="icon-user five_x"></li>  
  26.          <li class="icon-user six_x"></li>  
  27.       </ul>  
  28.    </body>  
  29. </html> 
Output:
 
Awesome_Icon
 
You can change the color with CSS.
 
Awesome_Icons_Color