8

I am new to web design and development and have been playing around with different styling techniques. During the course of my research, I came across icon fonts. Though I have investigated a number of tutorials and videos, I have been unable to successfully make use of icon fonts despite many hours of effort.

To start, I went to a site that offers a large number of icon fonts, chose the ones I liked, generated them and finally downloaded them into a folder. But now that these icon fonts are in a folder, what should I do?

DavidRR
  • 18,291
  • 25
  • 109
  • 191
Wp3Dev
  • 2,001
  • 7
  • 38
  • 54
  • 1
    Use it just like a normal font: http://www.font-face.com Figure out which character corresponds to which icon you want to use (Try Font Book/Character Viewer) – FeifanZ Oct 29 '12 at 21:35
  • 1
    http://inspectelement.com/tutorials/go-beyond-web-safe-fonts-with-css3/ For what its worth, I'd recommend against this. When you use a font with icons, you have very real text behind it. If it's not text, it shouldn't be using a font. There are always sprites, vector images, etc. – Brad Oct 29 '12 at 21:35
  • thanks for the comments. inspire48, it works but will it work even if the user doesn't have that font installed? and Brad, I will look into those thank you – Wp3Dev Oct 29 '12 at 22:01
  • http://fontello.com makes this process easy (not affiliated, just a satisfied user). – Tim M. Oct 29 '12 at 22:15

1 Answers1

12

Here is a step by step guide:

Go to Font Squirrel and download the @font-face kit. Unzip it, rename it to 'fonts', and put it in the same directory as your html file.

Use this as your html file:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    @font-face {
    font-family: 'ModernPictogramsNormal';
    src: url('fonts/modernpics-webfont.eot');
    src: url('fonts/modernpics-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/modernpics-webfont.woff') format('woff'),
         url('fonts/modernpics-webfont.ttf') format('truetype'),
         url('fonts/modernpics-webfont.svg#ModernPictogramsNormal') format('svg');
    font-weight: normal;
    font-style: normal;
    }
    li {
      list-style-type: none;
    }
    [data-icon]:before {
      font-family: 'ModernPictogramsNormal';
      content: attr(data-icon);
      speak: none;
      padding:0 5px;
    }
    </style>
</head>
<body>
  <ul>
    <li data-icon="^">RSS</li>
    <li data-icon="*">Star</li>
    <li data-icon=".">Shopping Cart</li>
  </ul>
</body>
</html>

You should see this:

Icon Font Example

You're rolling!

In addition, to know what character to use, check out the Character Map on the Font Squirrel site.

bookcasey
  • 39,223
  • 13
  • 77
  • 94
  • Awesome! So just for more knowledge, why are there so many url() in the @font-face? Are those links to all their fonts? or different formats? – Wp3Dev Oct 29 '12 at 22:13
  • 1
    Different browsers require/are able to use different kinds of font files (I know .eot is for IE, .svg is for iOS, etc). It's best to include them all. – bookcasey Oct 29 '12 at 22:34
  • How to identify which `data-icon` property is for which symbol, whereas I only have the files with some `unicode` attribute and some value against `d`. I am unable to understand that? – Ammar Dec 03 '14 at 05:08