🎉 Try Slides With Friends — Zoom Trivia, Live Polls, Icebreakers & more! Check it out →
Quick Tip: How to Create a Signia Icon Web Font with IcoMoon

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 icon web font with icomoon

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. create icon web font with icomoon

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. create icon web font with icomoon

Add Metadata

You can now add Metadata for the collection of icons you just imported. create icon web font with icomoon

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. create icon web font with icomoon

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. create icon web font with icomoon

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

X

You've successfully logged in!