Quick Tip: How to Create a Signia Icon Web Font with IcoMoon
Signia is without a doubt our most popular premium icon pack on Medialoot, and it's easy to see why; not only is it packed full of icons (over 700 at the last count), it is also supplied in multiple vector and bitmap formats for a wide variety of practical uses. And if you want to use it on the web, that's easy too as I will demonstrate in this quick tip on using Signia as an icon web font with IcoMoon.
Download Signia
If you haven't already, head on over the
download page to get the latest version of Signia.
Create a New IcoMoon Project
IcoMoon is by no means the only service available for creating custom web fonts, but it is simple, well designed and free to use so it is a good choice for creating custom web fonts. Open a web browser and navigate to
icomoon.io/app then click the
New Project buttom.
Import the Icons
Click on the
Import Icons button and navigate to the Signia folder on your hard drive. Locate the folder called
Individual SVG in the main Signia directory. Now select all (CMD/CTRL + A) of the files and click
Choose or
OK and they will be imported into your IcoMoon project.
Add Metadata
You can now add
Metadata for the collection of icons you just imported.
Select the Icons
This is where you can customize the icon set by selecting the icons that you want to use, for example if you only need icons for communication and users, or only need arrows etc. Of course, if you want to include all of the icons just go ahead and select them all. Click on
Font when you are done.
Download Your Web Font
On the next page you have option to name the icons and customize their unicode values. This can make it easier to remember which icon is which. When you are done click on
Download.
Using The Font
The package that you download from IcoMoon will include a sample html file that demonstrates how to use the icons. If it is a little overwhelming at first, you essentially just need to include the stylesheet between your <head> tags like so:
<link rel="stylesheet" href="style.css">
And then you can use a span element to print the icon of your choice:
<span class="icon-signia-01">
It's as simple as that!
Comments