How to create your own Font icons

Want to create your own font icons just like the icons on this link => http://fontawesome.io/icons/

Simply go to fontastic.me website and create a new free account. Once you’re logged in, click “New Font” in the top menu.

• Step 2: Export your own icon to SVG file.You need to remember that all icons have to be vector based. You can use any software you want to create new vector files, as long as you can export them into SVG files.
  I usually create all my vector icons in Adobe Illustrator. you can use Photoshop as well. Then, I change it to solid black color and I crop the document to fit the icon:
  Go to “File -> Save as” and choose “SVG” as a file format and click “Save”.
• Step 3: Import your SVG file to fontastic.me.Once you have your SVG file ready, go to fontastic.me and click “Import Icons” in the top menu. Then choose the file from your hard drive:
• Step 4: Create a new icon font set.Now you should see your own new icon set created among other free and premium icon sets. You can change the set name and add new icons if you need to:
  Now you can start building your new icon font set by clicking on the icon (it’ll highlight with a yellow border). You can choose as many icons as you want from different icon sets that are available. You can even import other entire icon sets if you have SVG files.
  When you’re done with selecting icons, click the “Customize” tab to see your set. Here you can change individual icon codes and CSS classes.
  Then, click the “Modify font” in the top right corner to change your font name and add a CSS class prefix.
• Step 5: Download your web font.Now you can click the “Publish” tab and then the “Download” button to get your files. What you get is the entire icon font set in different formats (.eot, .svg, .ttf, .woff) that support all major modern browsers. You can find also a CSS file that has a basic code for you to use.

All you need to do from here is to copy the “fonts” folder to your website project and include the CSS file.

Displaying your icons is as easy as:

<div class=”icon-rainmaker”></div>

If you want to make your icon bigger or change the color:

.icon-rainmaker:before {
 color: #0000ff;
 font-size: 100px;
}

It’s that simple.