Categories
Development Misc

Why use Icon Fonts?

How useful would it be to have common icons readily available as fonts instead of images? Icon Fonts, step forward and take a bow…

What are Icon Fonts?

Using icon fonts provides us with greater control over the characteristics of icons when compared to traditional images. As the name implies, icon fonts can be treated like any other font used on a website. This means the size, colour and shading can all be changed with relative ease.

Icon fonts can be imported in the same way a normal font family would be in CSS:

@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot');
	src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		url('../fonts/icomoon.woff') format('woff'),
		url('../fonts/icomoon.ttf') format('truetype'),
		url('../fonts/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

 Using Icon Fonts

Stand alone icons are useful for when only a visual prompt is needed with no accompanying text, such as a link to a shopping cart or an RSS feed. Once the font family has been added to the style sheet it’s just a case of using it in HTML:

<a href="#shoppingcart" class="icon-alone">
  <span aria-hidden="true" data-icon="&#x25a8;"></span>
  <span class="screen-reader-text">Shopping Cart</span>
</a>

There is not a huge amount of CSS that needs to be added to get the basic icon onto a webpage. When we start customising the attributes of the icons, the CSS can get a bit more lengthy.

.icon-alone {
  display: inline-block; /* This is just for a linking issue in webkit */
}
.screen-reader-text { /* Generic class for users with screen readers */
  position: absolute;
  top: -9999px;
  left: -9999px;
}

 Building your own Icon Font Family

One of the main issues with icon fonts is that the icons are already preset and packaged as a ready-made font. IcoMoon are a company that specialise in custom made fonts for industry but offer a free version of their IcoMoon App that enables you to create your very own icon font family.

iconmoon
Creating your own icon font family

You can choose from the thousands of icons they have available and even import your own. This enables you to create a custom made icon font family that only features icons that are useful for the task at hand. Once you have decided on your choice of icons, IcoMoon will package them as a font-file (.ttf).

The benefits of using an icon font instead of image icons are endless. Not only can they be highly customised with the use of CSS but they can also load faster, be used offline and are vector independent ensuring they look good on all devices.

Leave a Reply

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