39

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?

Sterling Archer
  • 22,070
  • 18
  • 81
  • 118
Nancy Collier
  • 1,469
  • 4
  • 17
  • 21

2 Answers2

105

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.

Ronen Ackerman
  • 1,180
  • 1
  • 6
  • 7
  • Thanks for such a descriptive answer -- really helped getting started with fontello – mike Mar 23 '14 at 00:10
  • 2
    @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. – Vitaly Apr 02 '14 at 06:28
  • What is the browser support for the CSS in step 5? – nomad Apr 17 '17 at 02:28
  • @nomad https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors Browser support is very good, IE7 and up – Ronen Ackerman Apr 17 '17 at 16:17
  • 4
    Can't believe their help material doesn't actually show you how to use the fonts in your web project. – Mitya Aug 30 '17 at 11:10
1

To update existing icons:

  1. Go to the webpage https://fontello.com/
  2. Use the top-right button to Import the [...]/fontello/config.json file.
  3. Search new icons and select them (just click, no drag-and-drop)
  4. Download the updated archive using the top-right button
  5. Overwrite all the files in the [...]/fontello directory.
obotezat
  • 1,041
  • 16
  • 20