How to use fontello fonts in your project

Fontello generates archive with fonts, css files and docs. Here are recommendation, how to use one in your project to show icons.

Recommended way

Copy ALL files with folder structure into your project, without change. That will simplify future font updates.
If you need to change @fontface params - use <your_font_name>-codes.css, and define @fontface rule in outer files. That will help to keep fontello folder intact, and will prevent mistakes on upgrade, when you overwrite content with new font version.

Also, having your own @font-face will allow to use new notation from twitter bootstrap 3+ - every icon can be defined with 2 CSS classes.

Don't forget to setup proper mime types for font file.
If you place fonts on separate domain, make sure, that server responds with proper CORS headers.
In the html for your page add <i class="CLASSNAME"></i> to show the font. CLASSNAME would be something like "icon-search" for your search icon. You can look in the css file to see the names of all of your icons.

That's a bad situation. Try to avoid it if possible. But if you can't - embed fonts directly into CSS. See example in <your_font_name>-codes.css.

To change the colour of an icon, simply change its css color property. E.g.

.download_icon {
    color: #FFFFFF; /* make the icon white */
}