Help Center – Adding icons into your theme

Hi Wes,

Great article as usual. I am a super beginner at this but a quick learner. Just need a few tips on where to actually put the individual icon codes. I am using the humble squid theme and am trying to place different icons above the category titles. Any help would be greatly appreciated.

Cheers

Andrew

@Andrew - are you wanting to do something similar to my Large Icons on Home Page example above.

Thanks Wes,

Yes like that example.

@Andrew - Our HelpCenter is built off the Bootstrap framework which makes everything responsive and because of that I don't have to write alot of code because its already built into Bootstrap.  However we can also accomplish that same look by adding some extra CSS.  Since I assume you are not going to use the Bootstrap framework like I did, let me write out the CSS you will need.  I'll try to post something for you tomorrow to look at so you can let me know if I'm heading in the right direction.

If you want to read up on Bootstrap you can do so here:  http://getbootstrap.com/

You can actually see my Bootstrap 2 column code on how I did the boxes from here if your interested (this is actually my entire home page although its changed a little now) :  http://bootply.com/82678

Thanks so much Wes.

I will definitely look into Bootstrap for future changes to my help centre.

Thanks again.

Andrew one more question for tonight.  Do you want your icon above or to the left of the text.  See attached on the left and my example they are above.  Just want to make sure I provide you with the correct code.

Above the text would be best.

Take a look at this test site.  I took a few of the categories from your site. Is this how you want it to look.  I modified one line of CSS to align it correctly and the rest is HTML.  Just let me know and I will post the code here for the first three blocks and then you can copy and paste to get the rest of yours in there.

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

Font awesome updated to version 4.0.  I've edited the code that needs to be copied into the Document Head.

@Andrew - make sure you update your document head as the code I send will include the new version 4.0 icons.

Thanks Wes! This inspired me to add a icon to the 'see-all-articles' link in the Section page.

@Selena - Awesome that looks great and thanks for sharing your screenshot.  I'm off to do the same :-)

@Andrew - got ya all setup.  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>

Now all we need to do is bump everything up so it looks centered.  Open your "CSS" 

• Find the following line (around line #591):  .category-list li a {
• Change margin-top: whatever it is to 40px

Just let me know if you get stuck along the way but this should do it.  I would also recommend that you add one more box to your site to make it 6 total blocks instead of 6.  Everything will line up that way.  Goodluck.

Thanks Wes, 

I'll let you know how i get on.

Andrew

Hi Wes,

As i'm using the humble squid theme there isn't the  {{category_list}} in the Home Page. This theme uses the {{category_tree}} component. I did test the code out in the noble feast template and it looks great however i would still prefer the layout of the humble squid theme.

Thanks

Andrew

@Andrew -  The code I wrote was for the Humble Squid theme.  I just switched to the Humble Squid and I see {{category_list}} so not sure why you see {{category_tree}}.  I took a lot at your page and you will need to copy my code right about your {{promoted articles}}.  Once you do that you will see it will add a row of 3 boxes with the icons like you are wanting.  If you see {{category_tree}} then delete that and paste my code.  You will need to do this inside of the theme editor of Zendesk.

@Andrew - I just followed my own instructions on the Humble Squid theme.  Once finished it should look like this:

https://moderatorwes.zendesk.com

Started a new humble squid template and everything works great. Thanks for your ongoning help Wes. Keep up the impressive work!

Thanks

Andrew

Hi, I'm having trouble getting font awesome icons to show up in my articles.

I've added the link to the font awesome css in the document head section of my HC and I see that when I view the source.

Then while editing an article I go into the HTML/Source Code and try adding:

<i class="fa fa-cloud-download"></i>

but it doesn't work, and when I go back into the HTML my <i> tag is gone.

Any tips on how to make this work would be appreciated.

Thanks,
David

BTW, if I edit that article directly using dev tools in Chrome the icon shows up correctly, and if I add an icon directly into the HC code (editing the theme) it shows up as well, so this feels like a problem with the article HTML editor.  Hopefully there is a way to get around this.

Thanks again,
David

@David - I just did a quick test and saw the same issue.  I believe you are correct that this will be related to the article area.  I have a ticket in with Zendesk on their icons as there icons are not showing in any of my themes so this could be related.  I will test some more and if I find a workaround I will be sure to let you know.

Thanks for the quick reply Wes.  I'm using an image for now as a work around, but would love to get font awesome working.  I tried to find a work around and was unsuccessfully - it looks to me that the HTML editor is getting rid of empty tags and when I tied to put anything in side the <i> tag it changed the tag to an <em> tag.

Hi Wes - you must be a busy man as you seem to answer many of the questions here on this forum. I am just new to Zendesk and still feeling my way around (slowly as i'm a beginner at this type of thing). I have tried to follow your icon changes above however I can seem to follow the logic to change the icons and add further buttons on the tiles after the first 3. My site is activeutilities.zendesk.com - the questions I have are as follows:

1. How do update icons as per the attached

2. How do I change the tile background colour - wanting to match our corporate orange

3. How do I add a background image, similar to support.mapmyfitness.com - sample image attached

I appreciate any help you can give me

Ben

Hi Ben and welcome to the Zendesk family.  A good bit of my code has been used in a few Help Center's out there. As you can imagine there are many different ways we can accomplish this. In my examples above I'm using Font Awesome but we can also using images.  If you want to do some customization to your Help Center I'll be glad to try and help you out along the way but sometimes its hard to do without having access to your Help Center.  MapMyFitness uses images that is hard coded into their Home page.  RunKeeper (http://support.runkeeper.com/hc/en-us) uses Font Awesome like my examples and is hard coded but we could also use JQuery to accomplish this.  

Lets take this question by question and in the meantime check out my custom theme below.  Let me see if and how I can do this without having access unless you want to give me access to your HelpCenter only.  I don't offer this alot but I will build you a custom theme if you can give me temp access to your Help Center module only.

My custom theme that is free to download or just take a look at some of the code that I used.  https://support.zendesk.com/entries/41702416

HI Wes,

Happy to give you temp access to our Help Centre - whats the best way to PM you?

@Ben - Super you can email my gmail account wes(at)cibertec.net  and you can contact via skype with the same email as I listed.