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:
-
@Rachel - You can use the below JQuery.
$( "section.category:nth-child(1) a " ).before('<i class="fa fa-heart"></i> ');
$( "section.category:nth-child(2) a " ).before('<i class="fa fa-bolt"></i> ');I also have a responsive Wiry Merchant default theme located here if you want to take a look as it will make your site responsive.
https://github.com/moderatorwes/Wiry-Merchant
-
@Wes
I've read through all of the comments and I'm trying to use your code here: https://gist.github.com/moderatorwes/ee49daf8a47dbb6f6068 to add my own icons.
I've added the JS:
//Category Home Page
$('h2:contains("General")').addClass('imageheading general-icon');//Section Home Page
$('.section h3:contains("Troubleshooting")').addClass('imageheading Troubleshooting-icon');
$('.section h3:contains("FAQ")').addClass('imageheading FAQ-icon');
$('.section h3:contains("User Guide")').addClass('imageheading UserGuide-icon');
$('.section h3:contains("Orders")').addClass('imageheading Orders-icon');//Section-Section
$('h1:contains("Troubleshooting")').addClass('imageheading Troubleshooting-icon');
$('h1:contains("UserGuide")').addClass('imageheading UserGuide-icon');
$('h1:contains("FAQ")').addClass('imageheading FAQ-icon');
$('h1:contains("Orders")').addClass('imageheading Orders-icon');CSS:
.imageheading.general-icon {
background: #fff url(https://p4.zdassets.com/hc/theme_assets/569177/200048165/general.png) top left no-repeat;
}.imageheading.UserGuide-icon {
background: #fff url(https://p4.zdassets.com/hc/theme_assets/569177/200048165/userGuide.png) top left no-repeat;
}.imageheading.FAQ-icon {
background: #fff url(https://p4.zdassets.com/hc/theme_assets/569177/200048165/faq.png) top left no-repeat;
}
.imageheading.Troubleshooting-icon {
background: #fff url(https://p4.zdassets.com/hc/theme_assets/569177/200048165/troubleshooting.png) top left no-repeat;
}
.imageheading.Orders-icon {
background: #fff url(https://p4.zdassets.com/hc/theme_assets/569177/200048165/orders.png) top left no-repeat;
}Do I need to add the class imageheading to the <h3>{{name}}</h3>
Thanks in advance.
-
@Nathan - All you should need to do is make sure the {{name}} matches your categories and sections in the JQuery.
You will need a category called "General" and the jquery will do the rest.
-
@Wes, thanks for the quick response, but I'm not sure I quite understand. I currently don't have a category called "General", rather I have four categories that I want to show on the home page with the icons that click through to see the Sections.
I've pasted the portion of code from the "Home page" I'm referring too.
<section class="clearfix">
<div class="row">
{{#each categories}}
<div class="col-sm-6 col-md-3">
<a href="{{url}}">
<div class="thumbnail, featureList">
<h3>{{name}}</h3>
<p class="category-description">{{description}}</p>
</div>
</a>
</div>
{{/each}}
{{pagination}}
</div>
</section> -
@Nathan - Any way I can actually see your HelpCenter.
-
@Wes, unfortunately I can't push it live quite yet. Dang it. I guess I'll just keep trying to troubleshoot.
-
@Nathan - So I think you need something like this. You can do alot of this without using Jquery now but this still should work.
//Category Home Page
$('h2:contains("Category1")').addClass('imageheading general-icon1');$('h2:contains("Category2")').addClass('imageheading general-icon2');
$('h2:contains("Category3")').addClass('imageheading general-icon3');
$('h2:contains("Category4")').addClass('imageheading general-icon4');
CSS (change the general-icon1, icon2, etc like we have above and link to the correct image. You should have 4 CSS entries to match the above code.
.imageheading.general-icon1 {
background: #fff url(https://p4.zdassets.com/hc/theme_assets/569177/200048165/general.png) top left no-repeat;
}Let me know how this goes and if you still have issues then I will post some of the new code.
-
Thanks for the help @Wes but I'm still troubleshooting.
-
@Nathan - any way you can just give me access to your Help Center and I'll get this knocked out for you. We can continue the discussion at support@wesdrury.zendesk.com if you would like.
-
Hi Wes,
I am in charge of content on our Help center and I don't know CSS. I want our help center to look better in a few basic ways, not talking major graphic overhaul, but icons in the section names, a frame around the search resutls, a few more little things to highlight the important stuff .
Is this something that you do as a service? How does it work?
Thank you
Merav
-
Hi Merav - You can contact me here and we can discuss your design needs further as I'm sure alot of my code that you need I may already have documented.
-
I have 2 questions. First where can I find the html to change the placeholder for the search bar? I only see that it is being called back by {{search}}. My second question is that I want individual icons for my category page? I will provide the current section of the category page I would like to target to have those icons.
<div class="category-container">
<div class="category-content">
<header class="page-header">
<h1>{{category.name}}</h1>
{{#if category.description}}
<p class="page-header-description">{{category.description}}</p>
{{/if}}
</header><div class="section-tree">
{{#each sections}}
<section class="section">
<h3 class="section-tree-title">
<a href="{{url}}">{{name}}</a>
{{#if internal}}
<span class="icon-lock" title="{{t 'internal'}}"></span>
{{/if}}
</h3>
{{#if articles}}
<ul class="article-list">
{{#each articles}}
<li class="article-list-item{{#if promoted}} article-promoted{{/if}}">
{{#if promoted}}
<span data-title="{{t 'promoted'}}" class="icon-star"></span>
{{/if}}
<a href="{{url}}" class="article-list-link">{{title}}</a>
</li>
{{/each}}
</ul>
{{#if more_articles}}
<a href="{{url}}" class="see-all-articles">
{{t 'show_all_articles' count=article_count}}
</a>
{{/if}}
{{else}}
<i class="section-empty">
<a href="{{url}}">{{t 'empty'}}</a>
</i>
{{/if}}
</section>
{{else}}
<i class="category-empty">
<a href="{{category.url}}">{{t 'empty'}}</a>
</i>
{{/each}}
</div>
</div>
</div>I understand if it is broken out as an ul > li I would be able to add the icons that way. Would I need to target these elements via JS?
-
Hi @Erick and welcome to the community. No need for JS anymore as you can see from the post that was back from 2015 before Zendesk introduced their curly bracket framework.
Question 1 - The search bar is being called by {{search}} which renders all the HTML. You can change the way it looks by editing the CSS and by adding classes to the {{search}}.
Question 2 - To use icons you want to use the {{#is}} statement. You can use is name or is id. I prefer to use ID if you are doing multiple languages. Below is just an example.
{{#is name 'FAQ'}}<img class="catimgs" src="{{asset '77_Essential_Icons_Book.png'}}" />{{/is}}
{{#is name 'General'}}<img class="catimgs" src="{{asset '77_Essential_Icons_Comment_Lines.png'}}" />{{/is}}You can find information on the is statement from here. I have several other post out with examples using images.
-
Hi @Wes
Some of our articles include video tutorials.
Is it possible to have the article list (in sections/categories) appear with an icon triggered only if the article contains a video?i.e.
Another area of the theme that has a similar function is Promoted Articles, which have an icon appear next to the article in section lists as long as they are set as promoted.
Many thanks as always! -
@Chris - This is possible, I don't know how much experience you have with the API but if you look at my Notification tip you will see it uses labels in order to show or not show the alert. I would do this based off if a label existed for that article. If a label contains "video" then show an icon next to the title.
-
@Chris - another solution you could try is with the curlybars. I do remember doing a Help Center a while back where I used code similar to this.
-
@Wes Thanks for the quick reply!
I've looked through both pages and like the idea of a tag triggering the icon.
Question is, how would I go about doing that?I have an asset ready and adding the tag is no problem.
Thanks again Wes! -
@Wes Thanks again for your help, but I've ended up replacing the promoted articles icon for the time being and checking off articles that involve video to trigger the icon.
Now, what would remain is how can I get the icon to appear on searchbar results and the search results page?
I understand it may involve this piece of code but I don't know where to insert it:
<li class="article-list-item{{#if promoted}} article-promoted{{/if}}">
{{#if promoted}}
<span data-title="{{t 'promoted'}}" class="icon-star"></span>
{{/if}}
<a href="{{url}}" class="article-list-link">{{title}}</a>
{{#if internal}}
<span class="icon-lock" title="{{t 'internal'}}"></span>
{{/if}}
</li>Lastly, would it be possible to stop promoted articles to appear at the top of categories or sections? We are trying to keep the order manual (to match order within our software).
Thanks a bunch! -
Add the material design icons from this awesome tool
-
Anyone managed to get this to work as per this question? https://support.zendesk.com/hc/en-us/community/posts/203458726/comments/360002248567
Trying to add icons in the Section.Category page, similar to promoted, based on the content or label, eg Label: Video.
Tried various options from this post and others but no luck. I either get errors that 'labels' or 'identifier' is not supported etc. Wanted to post the code I used but it is such a mess of various suggestions that I cannot make sense of it anymore. -
Hey Jacques,
I see there haven't been any responses here so I did want to follow-up with some documentation that may be useful to you:
- Using themes and templates to customize your Help Center
- Help Center CSS Cookbook
- Help Center Templates Introduction
- Help Center Javascript Cookbook
- Tips for using HTML to customize your Help Center
Additionally, we do have a professional services team available that can assist with getting this set up on your account for an additional cost.
If this is something you're interested in, let me know and I can get you in touch with your account manager to discuss further.
Cheers!
-
Thanks Brett. This is a side project so on the back burner for now.
I'll go through all the docs you listed when I can allocate some time again (we have RnI Friday's after each sprint, so hopefully then :) )
Cette publication n’accepte pas de commentaire.
112 Commentaires