<http://schema.org/articleBody>
"High-quality images can make the difference between a good website and a great website. However, they also add file weight, aren't easily scaled, edited or manipulated, and result in additional HTTP requests.\nWhen it comes to responsive design, the best solution is often not to use an image at all, and instead use icon fonts when appropriate. They're easily customized, allow for transparency and have good browser support. And because they contain fewer characters than a complete typeface, they also take up less memory.\nSee also: 13 Essential Job Boards for Creatives\nCreating icon fonts doesn't have to be time-consuming, because there are several generators that let you build your own custom font \u2014 using only the icons you really need \u2014 to help reduce file size. These also provide a download package with font and CSS files, ready to integrate straight into your website. \nUsing an icon font can improve load times by up to 14%, and because they're vector in nature, they're infinitely scalable, while still being smaller in size than an image sprite. You can style icon fonts dynamically using CSS, rather than requiring a new graphic, with the added bonus of using CSS3 properties such as \"text-shadow.\"\nThe process for using icon fonts is the same as loading any other font \u2014 by using the \"@font-face\" method, you can create the CSS rules that apply to each icon, create specific icon classes and finally add some simple HTML markup. Or, you can take an alternate approach and use the \"data-icon\" attribute in combination with CSS attribute selectors.\nWe've rounded up eight of the best icon font generators to help you start using scalable, lightweight, resolution-independent fonts in your own projects. \n\n\nIcon Font Generators\n\n\n\n\n\n\n\n1. Icon Vault\n\n\nIcon Vault lets you create icon fonts using only the icons you need, meaning less HTTP requests and faster page loading times. The fonts are vector graphics that will scale gracefully and look great on all devices, including those with Retina displays.\nYou can apply CSS styling, including color, text shadows, vertical alignment, animation and font size. It's easy to get started creating your own -- just download the template and upload a folder of your own icons for Icon Vault to make them into a custom font, using a simple drag-and-drop interface. \n\n\nImage: Icon Vault\n\n\n\n\n\n\n\n\n2. Fontastic\n\n\nFontastic helps you create customized icon fonts with ease, and it's ideal for those just starting to work with the concept. Simply import your own icons by uploading them as SVG files, and sit back as Fontastic converts them in seconds. You can take control of of the styling, as well as rescale, recolor, add drop-shadows or animate your icon fonts. Since you're only including the icons you need, you drastically reduce load times, by combining all your icons in a single font file. \nYou can use the standard settings from Fontastic, or you can change the character and CSS mapping. \n\n\nImage: Fontastic\n\n\n\n\n\n\n\n\n3. Fontello\n\n\nFontello is an open-source project that lets you combine any selected items from a range of fonts in order to create your own custom font. You can shrink glyph collections (to minimize font size), merge symbols from several fonts into a single file, with access to a large collection of open source artwork.\nFontello lets you search quickly for specific icons, preview the result and then change the class names to suit your website or project. Since every generated font pack has a config file included, you can load it back into Fontello to continue work. \n\n\nImage: Fontello\n\n\n\n\n\n\n\n\n4. Pictonic\n\n\nPictonic offers both free and premium versions when you sign up for an account. Use the live search to browse available icons and click on the ones you want. You can also filter results via category.\nOnce you've finished choosing your icons, simply click Continue and download the package, which includes the font files, CSS, SVGs, PNGs and more. The number of files you receive depends on how many icons you've chosen to include. You're able to customize all icons by size, color and text shadow.\n\n\n\n\n\n\n\n\n\n\n\n5. IcoMoon\n\n\nIcoMoon provides icon fonts and the ability to import and create your own, generating icon fonts of any size or color. There are both open-source and premium versions, with icon packs available to purchase and a free pack that you can download from Github.\nMaking your own icon font is easy -- just select the IcoMoon web app, click the icons you want to include and then download your font. You can change the name of the font, enable or disable ligatures, set baseline and em size, and change the character assigned to a glyph.  \n\n\nImage: IcoMoon\n\n\n\n\n\n\n\n\n6. Font Custom\n\n\nFont Custom runs on Ruby and generates cross-browser icon fonts from a collection of SVGs, making it easy to create your own icon font and vectors, without limiting yourself to popular, generic icon sets. There is no configuration required; just create a directory of your SVG files, run a command and Font Custom will create the font files and accompanying CSS file.\nThe command line watcher means there's no need to manually update. You can style the icons however you choose with CSS, using Twitter Bootstrap's naming convention. \n\n\nImage: Font Custom\n\n\n\n\n\n\n\n\n7. Pictos\n\n\nPictos provides handcrafted, infinitely scalable, royalty-free icon fonts. With the introduction of Pictos server, you can build your own icon fonts by choosing any icon in the Pictos library, and assign a keyboard key that corresponds to the icon. Simply paste the generated code snippet into your HTML and the Pictos Server will serve your custom-made icon font straight into your website, utilizing a simple CSS \"link\" tag (with no reliance on Javascript).\nThere are more than 650 icons to choose from, allowing for an unlimited number of icon fonts.\n\n\nImage: Pictos\n\n\n\n\n\n\n\n\n8. We Love Icon Fonts\n\n\nWe Love Icon Fonts is an open-source directory to choose and build your own icon font package, with a choice of several high quality icon fonts, including Brandicon, Entypo, Font Awesome, Fontelico, Make, OpenWeb Icons, Typicons and Zocial.\nTo use a set on your own site, click \"Add\" to add them to  your own collection. Then, you receive the embed code, using CSS to further customize how the icon fonts are displayed. While it doesn't offer a way to use specific icons from a set (you have to embed the whole font), it is a simple, straightforward way to get started using icon fonts for those new to them. \n\n\nImage: We Love Icon Fonts\n\n\n\n\n\n\nHave something to add to this story? Share it in the comments.\nImage: Credit"^^<http://www.w3.org/2001/XMLSchema#string>
<http://mashable.com/2014/01/14/icon-font-generators/>