Help Center – Adding icons into your theme

Zendesk level: Beginner

Knowledge: HTML

Time Required: 10 minutes

Updated:  07/23/14 - Updated to latest Font Awesome CDN

Updated:  04/21/15 - Updated to latest Font Awesome CDN

Icons play a vital role in web design. Even though they can be quite small and might seem redundant, they play many different roles. Icons can be a great way to bring essential content to the point. They are a great attention grabber and they help your website visitors to find and scan content.

This tutorial will show you how you can easily embed icons into your Help Center.  You can add icons to your header, footer, home page, categories page, accordions, articles, buttons, etc..   

FontAwsome has a good selection of icons and its super easy to use, so I will use them in all of my examples below.

Let’s get started!

You don't have to download or install anything--just point to the Font Awsome css file like so.

1. From the tools panel, select Customize Design.
2. Select Edit Theme.
3. Select Document Head and add the following:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet">

As shown here:(please note this image shows an older version-the correct version is above)

 

Now you are ready to start embedding the icons into your Help Center.  You can see how to type the code and some cool examples from here.

Examples

Below are some examples of how you can embed icons into your Help Center’s Design. 

If you want to show some of your examples please add a comment and attach an image of how you used icons in your theme.

Nav Icons & Code:

 

 

 

 

Nav Buttons & Code:

 

 

 

 

Article Icons:

 

Large icons on the Home Page:

 

One of my favorite Social Icons:

 

• HC-FA.png
• HC-FAarticle.png
• HC-FAbuttoncode.png
• HC-FAbuttons.png
• HC-FAHome.png
• HC-FA-navcode.png
• HC-FA-social.png
• HC-fontnav.png