![]() ![]() #Line icons webfont for freeIcoMoon comes with a number of icon sets already loaded, and you can add more to your library, most of which can be used for free (check the licensing). This HTML5 app takes away all of the pain of creating font files for simple uses such as building icon fonts. kerning and ligatures) is not important.īy far the easiest way is to use a great free online app called IcoMoon, by Keyamoon, which takes away all of the hassle of converting symbols into a web font. Symbol fonts can be built using a dedicated font-creation app such as Glyphs, but a professional typography tool is way beyond the needs or requirements of building a simple icon font, in which the relationship between characters (i.e. Compatibility: web fonts are supported by all modern browsers, and legacy browsers, too, even IE 6 and earlier.They will also display well against any color or image background. Flexibility: text effects can easily be applied to your icon, including colors, drop shadows and rollover states.This enables you to experiment with different sizes whereas, for bitmap images, you would have to output an image file at each size. Scalability: an icon font can be set to any size by setting the font-size property in the accompanying CSS.And once the font has loaded, your icons will render instantly, with no need to download an image. Suitability: an icon font will be much smaller in file size than a series of images, especially if you have used double-sized images for Retina displays.Then, we’ll look at how to use the generated font files and CSS in a web page.Īn icon font has several advantages over bitmap images, in addition to image sharpness. In this tutorial, we’ll look at how to turn vector icons into a web font using a great free web app called IcoMoon. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |