How do I use fontello fonts?

Question

According to one source, this is how I use Fontello fonts:

Now it's trivial to make a custom icon webfont, exactly for your needs. First, select the icons you like. Then update glyph codes (optional), and download your webfont bundle. Fontello generates everything you need and then you upload the bundle via this module's configuration page! It's that easy!

Okay. Now what? How do I invoke one of their icons on my webpage?

Solution

Inside the bundle, there is "font" folder and a "css" folder.

1. Move the font folder into your project. Your project might look something like this:

   /project-root
   -- /stylesheets
   -- /images
   -- /javascripts
   -- /font 

2. Include the Fontello css. Inside the "css" folder in the bundle, you'll see:

   [yourfontname]-codes.css
   [yourfontname]-embedded.css
   [yourfontname]-ie7-codes.css
   [yourfontname]-ie7.css
   [yourfontname].css

   For most cases, you will only need [yourfontname].css. Include that stylesheet in your project.

3. Inside [yourfontname].css is the @font-face rule that imports the font. Make sure the paths to the fonts are pointing to the right place. By default, they will look in ../font/.

4. To use your icons, add class="icon-ICON_NAME" to an element that you want to have an icon. You can see the list of icon names at the bottom of [yourfontname].css.

5. Optional: Fontello puts a margin-right: .2em on the icon because it expects you to use the icon with text, but sometimes you might want a standalone icon. I like to use <i> tags for standalone icons, so I add the following rule to the bottom of the fontello css:

   i[class^="icon-"]:before, i[class*=" icon-"]:before {
     margin: 0;
   }

   Now if you put class="icon-ICON_NAME" on an <i> tag, it will not have any unwanted margin.

Comments

[mike]

Thanks for such a descriptive answer -- really helped getting started with fontello

[Vitaly]

@ronen-ackerman i'd recommend to keep original folder structure as is. That will simplify next updates - just owerride folder with updated files. Also, if you have assets pipeline - use *-codes.css and place fontface in your sources with right font paths. That will protect you from editing after every font update.

[nomad]

What is the browser support for the CSS in step 5?

[Admin]

@nomad developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors Browser support is very good, IE7 and up

[Mitya]

Can't believe their help material doesn't actually show you how to use the fonts in your web project.