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.
- From the tools panel, select Customize Design.
- Select Edit Theme.
- 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:
-
@Kristina - I see the issue, change your code to the following.
"fa fa-usd fa-2x"
You should be good to go after that change. Let me know if you have any other issues along the way.
-
That worked! Thank you very much!!
-
Wes,
One more thing. Since I have got the icons working, whenever I click on the category box it says "oops. this page does not exist"
any ideas on how to fix that?
-
@Kristina - Sorry I'm just getting around to look at this. The icon doesn't have anything to do with the URL. Are you hard-coding the links in there, when looking it has "hc" twice. See below
https://advisorrecon.zendesk.com/hc/hc/en-us/categories/200013983-Pricing
To correct this issue you need to add a "/" in front of hc. Should be like this:
"/hc/en-us/categories/200013983-Pricing">
Pricing -
Hi Wes,
I am pretty new to Zendesk.
I tried to add a font awesome icon into one of my articles in the help center without success.
I read in the previous comments that an other user add the same issue, but I did not find the right answer.
So which is the best way to add a font awesome icon into my articles?
-
@Giulia - Add the following in the Document Head.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">After that you can use any icon from the following page:
http://fortawesome.github.io/Font-Awesome/icons/
Inside of an article you need to make sure that you use the HTML view to copy in the html.
<i class="fa fa-heartbeat"></i> -
Hi Wes and thank you for your reply.
I tried to so what you said but without success.
When I edit the HTML code and save the article, no icon is shown.
-
In the general settings - please make sure that you have "Display Unsafe Content" box checked. It will now allow the script to run if its not checked. Can you please verify that setting for me.
-
Also it looks like when I saved it on my test site it changed the i class to this:
<em class="fa fa-heartbeat fa-4x"> Icon Test</em>
You also will not see the icon until you publish the article. Hope that helps.
-
Hi Wes,
thank you. Now it works, but only using <em class="fa fa-heartbeat fa-4x"> Icon Test</em>.
So is it possible to have a reference of all allowed classes?
-
@Giulia - I'm not sure why its changing the i class to the em but I will need to reach out to Zendesk. The <i class> works but once you save it - it changes it over to the <em class> You can use the i class and just make sure you put text after it. I will reach out to Zendesk to see why its changing it as its doing in the background.
-
Hi, Wes
I added a few icons to our HC but the fa-newspaper-o icon doesn't appear. If I replace the name with a different icon, it does appear.
[EDIT]
Solved my own problem. That icon apparently was added after v4.1, which is what you reference at the top. Version 4.3 works fine.
Thanks for the tip and keep up the great work!
-
@Ken - Your code looks correct but expand your code and make sure you don't have any unnecessary spaces in your code. I plugged the newspaper icon to my theme and it showed correctly. If you don't get it figured out then post a link to your Help Center and I'll look at the code.
-
Hi Wes,
I have an other question about Font Awesome Icon.
I tried to add an icon for each category of category list.
I did this following one of your previous posts.
I copied the code generated by {{category_list}} and added the icon.
I see the icons, but I realized that I lose the properties of hide some of the categories when the user is not logged in.
How can I have both features? I mean the icons and the selection of topics for different users.
Thank you in advance for your help.
-
@Giulia - I'm trying to get my head wrapped around what you are referring to and also I need to know which code that you used as I have alot of code out on the forums. Maybe some screenshots or even a link to your Help Center if its live.
-
@Wes,
I'm referring to this code in previous posts:
On the Home Page remove {{category_list}} and copy and paste the code below. I linked the first three categories to your site so all you need to do is add the rest.
<ul class="category-list">
<li>
<a href="hc/en-us/categories/200013983-General-Help-Information"><i class="fa fa-thumbs-o-up fa-2x"></i><br />General Help & Information</a>
</li>
<li>
<a href="/hc/en-us/categories/200033093-Forgot-Username-Password"><i class="fa fa-exclamation-triangle fa-2x"></i><br />Forgot Username / Password</a>
</li>
<li>
<a href="/hc/en-us/categories/200014013-Registration-Renewal-Help"><i class="fa fa-user fa-2x"></i><br />Registration / Renewal Help</a>
</li>
.....Copy the <li> tags from above and paste here for your next category
</ul>
My help center is https://biotechware.zendesk.com/hc/it.
I would like to see an icon before every category, as in the code above.
I tried to follow that , but with no results.
The code I used is:
<ul class="category-list">
_ <li><a href="/hc/it/categories/200347269-Holter">Holter</a></li>_
_ <li><a href="/hc/it/categories/200347259-Piattaforma-Biotechware"><i class="fa fa-cloud-upload"></i> Piattaforma Biotechware</a></li>_
_ <li><a href="/hc/it/categories/200347249-CardioPAD-PRO"><i class="fa fa-heart-o"></i> CardioPAD PRO</a></li>_
_ </ul>_
and I have added to the document header the line:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
-
@Giulia - Lets just use the {{category_list}} and use some JQuery to add the icons.
On the JS tab add the following below the document.ready function.
$( ".category-list li:nth-child(1) a " ).prepend('<i class="fa fa-exclamation-triangle"></i> ');
Let me know if this will work for you and sorry for the late reply. Its been very busy with a newborn.
-
@Wes, yes, it works perfectly.
Thank you for your reply and best wishes!
-
@Giulia - Glad to hear it worked and when you add more categories just add -child(2), child(3), etc..
Goodluck with your Help Center and if you have any more questions just let me know.
-
Hi Wes,
How could i assign multiple categories to a single icon. For example i have a categories called IOS, Andriod and Windows. I would like to assign this to a single icon called Mobile Platform. Is this possible with humble squid.
Regards, Renato.
-
@Renato - Are you wanting to use a Font Awesome icon or an image that you have. If you are waning to use Font Awesome then you can use this code to add an icon before each category.
$( ".category-list li:nth-child(1) a " ).prepend('<i class="fa fa-exclamation-triangle"></i> ');
-
Wes,
I know you're busy but I'm hoping you can provide some help. I've got our home page (Humble Squid Theme) set up to minimize/maximize both the category and section list. I am trying to add either an arrow (that can go up and down) or a +/- sign next to each section (category not necessary, but wouldn't hurt).
I am having trouble placing an icon in front of each section AND getting it to toggle accordingly. I am already using google fonts for text and trying to add awesome fonts threw those off. Is this something you can help with. You've already been so helpful!
-
Hi,
We I wish to use an image. On click on that image it needs to take me to those Specific categories.
Regards,
Renato.
-
@Sane - Google Fonts and Font Awesome should not interfere with each other as I use both of them on all of my themes and customer themes and I've never seen them interfere with each other. Your Help Center is only allowing signed in users so I will need to create an account in order to see what you have.
-
@Wes - I have sent you a request via Skype (as listed in this comment section) so that I may give you access to our help center. I have gotten the icons to work with Google font, but have yet to figure out how to add it to each item in the section list or how to toggle them.
-
@Sane - Can you resend the Skype request as I'm logged in now but don't see the request.
-
@Tenisha - I'll post some code for ya hopefully over the weekend.
-
Hey Wes,
Do you know if there's a way for me to have icons added to the category names if I'm using the Category Tree list. I'd like to use font awesome icons but it looks like the only option I could find was to upload my own pics to my assets library and link using javascript.
-
@Rachel - What theme are you using and yes this is very possible with a little JQuery and fontawesome icons
-
@Wes Awesome! We're using The Wiry Merchant. If you could just point me in the right direction for how I should structure my JQuery then I hope I can figure it out. I've already got the font awesome code added to my document head.
Post is closed for comments.
112 Comments