Entypo Pictogram Suite

This is just something I had to share. Entypo Pictogram Suite by Daniel Bruce. Perfect for those pesky icons and graphics that I normally end up turning into sprites. These beautifully designed pictograms come in two sets, the Entypo set and the Entypo Social Extension for the obvious licensing issues.

The set is licensed under CC BY 3.0 and the font under SIL Open Font License. With the social icons either trademarked or copyrighted by the respective company.

Check out the full character map to see the full extent of this suite.

I make use of this amazing icon set in a number of university projects as it removes most of the hassle of sourcing a good set of icons which match the design style of the project. The benefit here being that the icons themselves are glyphs meaning they can be styled by using CSS.

Using Entypo

How to we use this in a project site? Just like any other web font you are using you need to either inbed or link the font files. Two main ways of doing this the @inport css method and the usual HTML technique. the benefit lies with the latter with the whole async downloads thing. You can read more about @import vs link performance in this article by Steve Souders. TL;DR the link method is faster.

Add this line to the head section of the page:

<link href='http://www.example.com/css/entypo.css' rel='stylesheet' type='text/css'>

The entypo.css file would look something like the one below. You can add other css rules such as color and font size to this also say if the icons are defaulting too small. However I leave this css file as generic as possible to make it suitable for as many projects as possible.

 @font-face {
	 font-family: icon_font;
	 src: url('http://www.example.com/fonts/entypo.ttf');

Effectively this is what happens when you use a Google WebFont, linking to another css file which has the url and font-family name. The usual way I use Entypo is to attach the font family to a class selector then wrap the entypo symbol character code in a span element with the class .icon. The selector would have the font-family attribute like this:

.icon {font-family: icon_font;}

Check out this pen for a live demo you can change around a bit.

Download Entypo

Get the complete set from Entypo.com

Check out Daniel Bruce’s other work on dribbble.

Just another WordPress site