Icon fonts give you access to entire library of icons, right from your font picker. They make it easy to use icons in your design without having to fuss around with pngs, svgs or any other image format.
Icon fonts are especially great for rapid prototyping as you can quickly add fidelity to your concept without getting caught up in detail too early.
Here are some ways icon fonts can speed up your prototyping in Atomic:
Icon fonts can be animated in Atomic
You can animate the transition an icon makes between two pages in your design. The transition can change the color, size, position and opacity of your icon font. You could even add or remove a shadow!
Icon fonts scale easily
Whether you’re prototyping for high-resolution mobile or desktop screens, icon fonts always remain crisp, there’s no need to create separate SVGs or 2x PNGs.
They’re already available in Atomic
Atomic already has two icon fonts available for you to use: Font Awesome or Material Design. In fact, we’ve just updated Font Awesome in Atomic to the latest version (4.6). Atomic also lets you easily upload your own icon fonts to use in your Projects.
Using an icon font in Atomic
It’s also easy to add your own icon font to Atomic – just make sure the icon set also include unicodes, as you’ll need these when it comes to placing the icon you’d like to use in Atomic.
To get started, locate an icon font pack you’d like to upload into Atomic. For starters, you may want to try IcoMoon or Icon-Works free font packs. Make sure you check the licenses of any fonts you upload to Atomic to ensure they’re suitable for use in this way.
Download the font pack and open the Zip file. Within the zip file there’s usually a font folder – locate that and then inside there should be a WOFF font file.
Go back into Atomic, and with a text box selected, click ‘Add Fonts’ from the drop down. Drag and drop the WOFF font file into the font uploader and give it a few seconds to upload.
Navigate back to the zip file. Inside you should find an html file, usually called ‘demo.html’. Double click on this file to open it in your browser. You’ll now see all the icons you can use in your design, displayed as unicodes in your browser.
To use the icon front in your design, make sure you have created a text element and selected the icon font from the font dropdown. Then, navigating to the html file, copy the icon you’d like to use by selecting it and using Cmd + C, then navigate to your Atomic design and paste it into the text element by pressing Cmd + V.
As the icon is a font, you’ll be able to treat it as such. This lets you easily change the color and size from the properties panel.
Note that if the icon isn’t appearing in your design at first, you may need to refresh the page.
Dive into the details
Looking to learn more about icon fonts, or maybe even make your own? Here’s some handy resources to help you get started:
- Rafal Tomal’s simple guide includes easy step by step instructions on how to create your own icon font using fontastic.me.
- In this timeless long read, Chris Ferdinandi outlines how to embed icon fonts and use it in your HTML.
- Want to add icon fonts to your Wordpress site? Envato walks you through how to do so using IcoMoon’s free icon set.
- Web Designer Depot takes you on a history lesson, outlining the importance and role of icons in today’s world, and how icon fonts fit into all of it.
Not using Atomic yet? Try Atomic free for 30 days.