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?

Answer 1

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.