Adding Spice to Your Website Using Icons

Creative cover with the text "Icons"

Author NameLogan Garcia
July 13, 2017

Expert route

This is an intermediate topic and perfect for those who feel comfortable working with the CMS and other design tools. View beginner or advanced topics instead.


So, you have a site with top-notch content and the navigation flows just beautifully…but something is missing. And if you're anything like me, you know that design matters but don't always know where to start. That's where icons come in to play.

The Purpose

Our previous method for designing icons was cumbersome: we were tired of searching for icons or building our own, uploading them and finally inserting them on the page (and if the icon didn't work with the content, we would need to start all over).

You can now insert icons right from the edit view within the CMS. We've prebuilt the icons to accompany almost any content, and there are three sizes and colors to choose from.

When to Use Icons

Use icons with simple content that is already separated. Don't make your content work around the icons, rather, work the icons around your content. 

Before using icons, we ask that you take a moment to review our icon best practices in the Web Style Guide. Only use icons when you can find one that is appropriate for your content. If the icon doesn't make sense to you, it also won't make sense to your visitors.

We're using Google's Material Design Icons because it was the most diverse set we could find. Visit the icon example page to see what's available. Contact web support if you need an icon other than the ones that are available and we'll discuss what to do.

Adding to Your Pages

And the part we've all been waiting for (drumroll please)…how easy it is to place icons on your page. All you need to do is ensure the Icons gadget is enabled in the Gadgets sidebar. Enabling it once keeps it enabled across every page you design.

Next, just choose the icon name from Icon gadget dropdown and make sure the preview displays the icon you want. You can then change its color or size before inserting the icon.

While in Direct Edit mode, a placeholder will be shown for the icon, but as soon as you save and exit, it will magically transform into an icon!


question_answer

If you have any questions about using icons, any other features or just general design, we would be more than happy to help. (Oh, and that's the "question answer" icon.)