by Bryan Chalker | Feb 24, 2014 | Website |
I love creating icons. Colorful and vibrant, with nice little transparencies and details. They can be beautiful and effective navigational elements, as well as visual breaks in heavy text areas. It’s hard to think of a project which wouldn’t benefit by using them properly. The traditional icons don’t always fit the need, though. Sometimes you need vector versions for scalability – or multi-sized ones for navigation and mobile use. In these cases, icon fonts are a more practical and easier to maintain approach. Icon font sets and creators, such as Font Awesome and Icomoon, have made it so much more accessible for designers to create their own libraries. Leverage them. Icon fonts are basically “glyphs” to use in your projects, as you would a traditional font. This allows you to style with CSS (color, multi-layer overlays, animation, etc.), as easily as you would do for your other fonts. You can use a font-creation app, or a web-based solution like Icomoon. Icomoom is an easy (and free) tool, and allows you to import your exported SVG files into their font-converter. It then provides a zipped download of the newly created font-set, example usage file, and a detailed CSS file. Very straightforward and useful. Once downloaded, you upload to your server (or CDN), and use the “font-family” attribute to assign. Easy.[/icon_box] What to consider when creating your icons. When you are creating your traditional icons for a project, consider creating a “font version” at the same time. This not only gets you thinking ahead, but it’s keeps you from becoming overly complicated in your creations. Though they can be used in...
Recent Comments