Tutorial: Use Entypo Pictogram Suite As @font-face In Your Web Designs

May 24, 2013 · 7 comments

by Lars

icon-set

Web fonts are pretty popular at the moment and for a good reason. You see with the @font-face rule, web designers do no longer have to use one of the “web-safe” fonts and this opens up for using all kinds of cool fonts in designs. In particular, we see icons and pictograms now made availble as fonts and because fonts scale well just like vector graphics this is a really cool technique. Just changing the font size and the icons adjust, as you need them to without losing any image quality.

The techEntypo Pictogram Suite is a 250+ set of well-crafted icons designed to suit your every web design need. Now on Current 2.0 release, it boasts of improved old pictograms plus 150+ new icons as well as a Social Extension. It also has Character map for your complete reference along with a Glyph guide available as .rtf or Rich Text Format file and improved hinting for selecting the next icon you want to use.


ElegantThemes
ThemeForest

Advertisement
entypo-pictogram-suite

Icons are a staple in a web developer’s toolkit simply because icons add a certain look and feel to your website’s overall appeal. Entypo exactly does that and more. Designed by Daniel Bruce and Andreas Blombäck , this set is a free download in icon font: OpenType, TrueType and @font-face formats. It also includes image formats in EPS, PDF and PSD. It also under Creative Commons license (CC by-SA 3.0) which means you’re free to share and remix it all you want for your work. Atribution is required so an attribution format is available on the site.

pictograms

You may be wondering how to use the Entypo as a web font on a web page. It is actually simpler than most people think. In the download package you will find a folder called @font-face. This folder contains all you need for the two fonts: Entypo @font-face and Entypo Social @font-face. At the end of the page your will find a demo I created and made available as download. This will help you try out the technique locally and learn how to do this yourself.

You need to upload these files to your server and add a bit of CSS to make the fonts available. Create a CSS file called entypo.css and add the following code. Save this CSS file in the same folder as the uploaded @font-face files.

@font-face {

font-family: ‘entypo’;

src: url(‘entypo.eot’);

src: url(‘entypo.eot?#iefix’) format(‘embedded-opentype’),

url(‘entypo.woff’) format(‘woff’),

url(‘entypo.ttf’) format(‘truetype’),

url(‘entypo.svg#entypo’) format(‘svg’);

font-weight: normal;

font-style: normal;

}

@font-face {

font-family: ‘entypo-social’;

src: url(‘entypo-social.eot’);

src: url(‘entypo-social.eot?#iefix’) format(‘embedded-opentype’),

url(‘entypo-social.woff’) format(‘woff’),

url(‘entypo-social.ttf’) format(‘truetype’),

url(‘entypo-social.svg#entypo-social’) format(‘svg’);

font-weight: normal;

font-style: normal;

}

In addition, you need to add font-family: “entypo”; in the CSS selector where you will use the special characters. In the demo I used a list structure.

section#characters ul {
list-style: none;
}

section#characters li {
float: left;
font-family: “entypo”;
font-size: 4em;
}

Once this CSS is in place and included in your page like this you are ready to use it.

<link rel=”stylesheet” href=”/font-face/entypo.css”>

In order to find the unicode or HTML special character you need to open the document Glyph guide.rtf.

guide

Here you will find lists off all the entypo characters and the corresponding values to use inserted into your HTML. Here is an example of two ´characters inserted into HTML in a list structure. This is also the way it is done in the demo you can download below.

<li title=”phone”>&#128222;</li>
<li title=”mobile”>&#128241;</li>

This is it – you are ready to add Entypo to your web projects. Let me know in a comment what you think about this resource and if you know about any similar web developer goodies I should review.

You can get Entypo here and download the demo here.

Author : Lars Vraa

Lars is passionate about web design, web development, SEO, social media and loves to look into new technologies, techniques, tools etc. and to write articles for tripwire magazine readers.

{ 7 comments… read them below or add one }

Srihari Sriraman August 28, 2013 at 7:18 pm

You can use https://github.com/ssrihari/entypo-selectors for the css selectors generated from the character map

Reply

annesofie August 29, 2013 at 1:04 pm

Hi Sruhari,

Thank you for your comment, we appreciate you taking the time to comment on the post and sharing new resources :)

Reply

BD May 30, 2013 at 6:40 pm

Are there any alternatives to the Entypo suite that you could recommend?

Reply

Theo May 26, 2013 at 9:48 pm

Pictograms are really great, the only downside is that we have to load them. It would be nice if they could implement them in the html entities. Thanks for the tut!

Reply

Lars May 28, 2013 at 10:48 am

You are welcome Theo and valid point with regards to the performance aspect

Reply

Jason May 25, 2013 at 5:38 am

What you could also do is put these icons into IconMoon, edit the CSS files and not have to worry about having to use all the complex characters.

Reply

Lars May 28, 2013 at 10:49 am

Sorry I don’t know IconMoon, how does it work?

Reply

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>

Previous post:

Next post:


Web Analytics