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.
-
Open Inkscape and open the PNG file.
-
Go to the path and then click on "Trace bitmap".
![Inkscape]()
-
When you click on Trace bitmap a new window of Inkscape is opened then click on "Update" then "Ok" then close it.
![Trace_bitmap]()
-
Save this file.
Note: Remove the file extension from the name when you save this file.
-
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:none; float:right; margin-left:15px;}
.x{font-size:20px; color:#0591e5;}
.two_x{font-size:30px; color:#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]()