Post
Ask Question

How to Create Custom Icons Using Font Awesome

Introduction

This article explains how to use the awesome font icon; and how to convert a PNG file to an SVG file. Font Awesome is fully Open Source.

You can also contribute to 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 it?

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.

Open Inkscape and open the PNG file.

Go to the path and then click on"trace bitmap".

Inkscape

When you click onTrace bitmap a new window of Inkscape is opened then click on "Update" then"OK" and then close it.

Trace bitmap

Save this file.

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

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

SVG file

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.

SVG icon

Go to the footer and click on "Font".

Font

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

Download_strip

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

Icomoon file

Now you create an 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


Similar Articles