In the history of icon font representation, we see two distinct methods emerge. Initially, image formats such as GIFs and PNGs were utilised to communicate icons on websites. However, deemed as inefficient, this method was replaced by the development of CSS sprites. Sprite is a PNG file, which contains a set of icons used in a web application. Each of these icons is later applied to web pages as required by referencing the PNG file in the stylesheet. Although the process yielded greater efficiency, its popularity reduced because:

  • It resulted in additional requests being sent to the server.
  • Image quality suffered when the icons were scaled.
  • Responsive web design emerged as a new design paradigm.

Designers hence addressed the problem by resorting to the old technique of font representation. Just like fonts encapsulate numbers and characters, icon fonts are comprised of symbols and glyphs and hence are, in essence, similar.

This post is focused on discussing the basics of icon fonts, their pros and cons and how to create a custom font icon using the online tools Font Awesome & IcoMoon.

What is icon font?

Icon fonts are fonts containing symbols and glyphs (derived from the Greek word “gluphē” meaning “carving”, is a small graphic symbol represented for writing purposes). A glyph can range from an alphabet to numeric font and other special symbols/encoded characters or picture, which you can style using CSS, just as you style anything else on your web page. These icons facilitate for space optimisation and quick recognition of services. For example, you can easily identify the “hamburger” icon for a navigation menu. They can also be scaled infinitely as they are represented in the vector form. These characteristics have made icon fonts immensely popular among designers today.
menu-alt-512
(Source)

Pros and Cons of Icon Fonts

There are some significant benefits to swapping traditional bitmap images for icon fonts some of which include:

  • Flexibility in styling – Using CSS, you can apply any effect on them, for example, amend their size, color, shadow, shape and because they are image based icons, you can also easily adjust their opacity, orientation, etc.
  • Scalability – Owing to being vector in nature, icon fonts are extremely scalable whilst retaining the quality. You can scale them from any direction (left, right, up or down) using the CSS font size property.
  • Reduced server load time – Using font icons on your web page will reduce the number of HTTP request(s) sent to the server to load them as opposed to bitmap images. This effectively means that the chances of them loading on slower connection speeds are higher than bitmap images.
  • Faster loading – Because they are smaller in size, they load faster than bitmap images.
  • Browser support – They’re supported on all the latest versions of browsers (including IE6).

But they have some limitations :

  • Simple images – Icon fonts are not optimised to represent complex images and hence your options are limited to using them for simpler scenarios.
  • Colour palette – Icon fonts are limited to simple solid colours. If you want to introduce gradients and rare shades then you can achieve this only by styling them using CSS (another few lines of code).
  • Grid homogeneity – Icon fonts are designed for specific grid sizes (in the multiples of 16) as they follow the vector system, for instance, 16×16, 32×32, 48×48, etc. They don’t scale as well for heterogeneous grid values, for example 25×25.

Creating custom icon font using online tools

Creating a font icon has become easier in the recent times as there are myriad options of online tools available, which provide you an array of icons to use in your website directly. However, you can choose to create one manually using programs to convert icons into formats usable for styling with CSS.

I have narrowed down on two interesting online font icon tools – they’re free, help create icons easily, are super usable, have more than a dozen pre-defined icon packages and great colour palettes – viz. Font Awesome and IcoMoon.

Font Awesome

This tool helps add icon fonts to your web page by mapping a set of Unicode codes for pre-defined icons within your project’s stylesheets to the web browser. It has a rich palette of over 439 icons. It is completely free for personal and commercial use. Although it was designed for Bootstrap initially, you can adapt it to any framework today.

You can either download the tool as a .zip file, which contains the fonts and the CSS files used for styling (corresponding LESS and SASS files are also provided although I won’t work with them for the demonstration) from the homepage or add a reference to your web page’s source with a link to a third-party hosted CDN (MaxCDN) within the tag.

Once you have downloaded the .zip file, map the extracted files to your project’s folder structure by creating two directories called ‘fonts’ and ‘css’ and move the relevant files into these directories. You can then reference the stylesheet in your web page’s source file within the tag in the section. The easiest way, however, is to add the link to the third-party hosted CDN within the tag directly as follows:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Using Font Awesome with CSS “Pseudo” Element

You can add an icon font to your project using the :before and :after pseudo CSS selectors to style an HTML element. To do this, you first select the HTML element you want to add the icon font to. Then, using either of the selector classes, define its position and style within the tag. The icon font has a code associated with in the Unicode format, which is used to communicate the icon to the browser. Hence, the main properties that need to be defined to display the font icon in the specified position are the font-family and content attributes of the pseudo selector classes.

<!-- Here is the styling -->

<style type=”text/css”>
.my-button{
    display: inline-block;
    padding: 8px 12px;
    background: #eee;
    border: solid 1px #D5D5D5;
}
.my-button span{ 
          display: inline-block;
}
.my-button span:before{
    font-family: 'FontAwesome';
    content: '\f085';
    position: relative;
    margin-right: 5px;
    font-size: 110%;
}
</style>

<!-- Here is the HTML markup -->

<div class="my-button">
    <span class="text"> Settings Menu </span>
</div>

Here is a sample of the output:

setting

As seen from the above example, the value ‘\f085’ corresponds to the multi gear icon used to represent “Settings”. You can retrieve a list of icons from here and procure their codes by navigating to the icon links (for example, the code for the cogs can be located on this page).

Now that you know the manual method of creating and adding font icons to your project, I will demonstrate how this process can be automated using IcoMoon.

IcoMoon

IcoMoon, a popular icon font tool, which provides three main services – Vector Icon packs, an app version and hosting icons as SVGs or fonts, is created by Keyamoon to automate the process of creating icon fonts. It is divided into two packs viz. the open source – the free one – and the premium packs. One of the advantages and disadvantages of the tool is its grid homogeneity set to multiples of 16px (32px, 48px, etc.). The general purpose icons in the pack are available in SVG, PDF, Ai (Adobe Illustrator), EPS and PSD file formats. Other premium icons such as Linearicons – a line icon set – and the Ultimate/Essential packs are suitable for all types of projects.

The IcoMoon App is an HTML 5 application available on the Chrome Web Store (runs offline) and has the following features:

  • Browse and search the available icons quickly.
  • Download pre-defined icons.
  • Edit them as per your requirement.
  • Import the custom edited icons.
  • Create your own icon fonts
  • Download the created icons in SVG, Polymer, PDF, XAML, PNG formats or CSS sprites.

Using IcoMoon to create font icons

While the process of downloading and subsequently using IcoMoon in your project mirrors Font Awesome’s (download the .zip file, map the fonts and CSS files into separate folders within the project directory structure, add the link to the stylesheet within the page’s source file’s section, use pseudo CSS selector classes :before & :after and other styles to position the icon and the Unicode code with the content attribute to add the icon to an element) the main difference between both is that with the IcoMoon App, you can create a custom font icon (i.e. import an icon provided by the client to format it to PMG, SVG, etc. or design your own icon), import it into your project as an SVG (or other file format) image or edit the available icons. Please refer the documentation to learn the step-by-step process of using the tool.

Demo

You can view the font icons created using both the aforementioned online tools in action in the short demonstrations that I have prepared.

I have used the available “cog” icon for the Font Awesome demonstration and custom made icons with the IcoMoon App (please see the steps to create custom font icon with IcoMoon here).

In conclusion, I would like to reiterate that icon fonts are expressive, easy to use and design and are indeed the new font representation in the Internet sphere today. They are here to stay and improve in the future. I would recommend you to try the online tools and leave your feedback in the comment section.

Further Reading:

No comments

Leave a Reply

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