Iconography with Web Fonts

the science of identification, description, classification, and interpretation of symbols, themes, and subject matter in the visual arts. It is what helps you communicate your composition without you speaking.  


Above is an example of how iconography can be used in the modern society today. It exemplifies and specifies a message in various ways. Depending on the audience you are most likely to change the image. The icon itself can have different emotions to them, they not only send a simple message to the audience, but they themselves have emotion.  Icons everywhere can communicate something, in fact we see them all over the place today. To choose an icon, there are three things that would have to be in mind; the audience, your company and the icon itself. These are questions that would help choose a safe and successful icon for your composition.  

How does it work?

Simple. You make a web font, upload it to fontello, then download it.

Where do I start??

you want to first decide on what your icon would look like.
There are many websites out there to explore different web icons fonts. There are different sites to explore, the problem is deciding right?

Lets begin…

1. The website we will be using is fontello. This site will allow us to generate web fonts from vector files such as SVG files (scalable vector graphics).

Why is this important?

Its important to know where you are uploading your files from and the correct format its suppose to be in. As a result, it would make things easier for you in a long run. Take Illustrator for example, its a vector program, perfect for creating our first web icon font.

2.a. Open Illustrator
b. Give the file a name
c. height and width should be set to 1024 pixels
d. begin making your shape or icon

Now, what you want to consider is the size, reason for the specific sizing is because SVG files have border widths and you want to maximize the size of your image, think of it this way, you have an image right? you can only make it 1024 pixels wide, if you go over that width, it will be cropped. Its best to keep it that way to stay safe.

Saving and uploading your icon

What next?..




In the above video, it simply shows you how to create, upload and download your costume font to use in a live web program such as sublime text 2 or any html/css external programs.

How code works when it comes to icons

Here you will see how coding works when it comes to exploring different icons.

This is how your code looks without css, just html below.  In this code, you have a DIV, that wraps around the whole thing. You have 5 H tags and LISTS items inside them. The H tags, we want to give them a class and call it “icon-[yourfontname]”.

<div id="accordian">
	<li class="active">
<h3><span class="icon info">About Us</span></h3>
	<li><a href="#">Sponsors</a></li>
	<li><a href="#">Exibitions</a></li>
	<li><a href="#">Membership</a></li>
	<li><a href="#">Membership gallery</a></li>
	<li><a href="#">Newsletters</a></li>
	<li><a href="#">Site map</a></li>
	<li><a href="#">Online Registry</a></li>
	<li><a href="#">Slide Registry</a></li>
	<li><a href="#">Artisian Registry</a></li>
<h3>Contact Us</h3>
	<li><a href="#">Donate</a></li>
	<li><a href="#">Women artist</a></li>
	<li><a href="#">Volunteers</a></li>
	<li><a href="#">Links</a></li>
	<li><a href="#">Call for art</a></li>
	<li><a href="#">Workshops</a></li>
	<li><a href="#">Special events</a></li>
	<li><a href="#">Press release</a></li>

In the above snippet, we gave one of our H tags a class, and called it “icon-home”.

Now what?…

Now that you have your icon created and downloaded it, let’s try plugging some icons into code pen.

In your css, you want to use the “@import url()” tag to implement custom fonts to use in your code. For example, i want to go to font awesome and use their custom icon fonts, i would use this…..

@import url(http://fonts.googleapis.com/css?family=Nunito);

This would allow me to give a class to any of my H tags and call them icon-[fontname]. I can now access font awesome’s library of custom fonts.


Try it out in code pen here.


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>