Help Center – Adding icons into your theme

@Tom - There's a manual way of adding icons to your categories and there's an automatic way using JQuery.  I have done both but most of the time I hard code my categories as they hardly change.  I normally use Font Awesome icons like in the images above. The automatic way can be found here:

https://gist.github.com/moderatorwes/ee49daf8a47dbb6f6068

The automatic way uses images instead of icons.  I've signed up for an account on your Help Center so that I can take a look at what you are trying to do.

@Tom - Did you look at one of my current Zendesk themes.  The one I have active now is similar to the Humble squid and all you would need to do is just updated my theme.  You can see it live at http://moderatorwes.zendesk.com and you can download it from https://github.com/moderatorwes

Wes,

really liking this and want to apply this and have one question.  If we have different posts within a help desk Section, can we apply different icons to each posting title.  I would like to show a video icon next to video posts, but not sure how to tell the CSS or HTML how to not show the video camera for every post title.

@Bastian - I wrote some code similar to what you asking for on another post somewhere.  After digging I found the following code that you could try out.

 Just make sure the word "Video:" exist in your article title.  I'm using FontAwesome for the icons as thats what I always use since its easy to integrate.

Document Head (calls the CSS for the icons)
<!-- Font Awesome -->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet">

CSS 
.video:before{
content: "\f03d";
color: #a83030;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
font-size: 18px;
}

If you would like to change your icon then look on the below list and put in the
icon code for content: " "

http://astronautweb.co/snippet/font-awesome/
You can also change the color of the icon and size if needed.

JS  tab
$('ul.article-list a:contains("Video:")').addClass('video');

Let me know if you run into any issues.

@Wes

You are THE man.  Awesome solution, and after figuring out what I had screwed up with the JS part of it (needs to go inside the (document) function) , it works brilliantly.  Was even able to expand to other section headings.  

thanks and keep up the great work.

@Bastian - Awesome and glad to hear you got everything working.  Yes I should have mentioned the JS code went below the document ready function.

I have alot more code to enhance Zendesk located here:   https://github.com/moderatorwes

Alot of tips and themes located here:  https://support.zendesk.com/entries/25424716-Help-Center-community-tips

Goodluck and you know where to find me if you need anything else.

I have read over these articles and everything works great, but when i try to change the icon to a different one, nothing shows up! any suggestions??

Hi Kristina -  First make sure you have the latest version in your Document Head.

Your code should look something like this:

If your still having issues and would like for me to take a look then please provide me a link to your Help Center and I'll be glad to take a look.

@Kristina - Well sorry it stripped out my code.

Document Head should contain the very first line here:  http://fortawesome.github.io/Font-Awesome/get-started/

Wes,

That is the code i already had in. I would love for you to look and see if you know what is wrong. Thank you

https://advisorrecon.zendesk.com/hc/en-us

@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.