Deprecated: mysql_pconnect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in /home/content/72/3916572/html/web_nulence/Connections/config.php on line 17
How to Create an Icon Font
HOW TO CREATE AN ICON FONT
Twitter Facebook

One of the most important details on a website are their icons. Once the right set of icons for your project is completed, in many applications, it makes sense to convert them to web fonts.

WHY?

Lightweight - smaller file size when compared to images.
Standard Font Sizes - graphic can be set to font sizes.
Effects - can be easily applied (shadows, colors and more).

WHAT DO YOU NEED?

Icons set in format vector.
Icomoon web app by Keyamoon.
Vector-drawing program (such as Illustrator).

PREPARE YOUR ICON PACL

Must be one solid color.

The same size thickness for each icon.

Simplify as much as possible and fix imperfections.

EXPORT TO SVG

Select an icon.
Create a new artboard in Illustrator and paste icon there.
Color the icon to black.
Leave the background white.

Go to File - Save as... - SVG

IMPORT INTO ICOMOON

Open the IcoMoon web app.
Click on Import icons and select all the SVG files to be converted.

Then, select the icons that you want as web fonts.
The icons selected will appear in yellow.

When you are ready select Generate Font

DOWNLOAD ICON FONT

Select Download.
Have fun with your icon fonts!

Twitter Facebook

more

App user experience, interface design, iOS and Android development for a location based social media app. Common features include maps, in-app messaging, twillio SMS service, Facebook and Twitter APIs integrations.

Back to Blog