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:
-
Hi Philip were you able to get anywhere with the dropdown. I was able to do it on my site via Bootstrap framework that I already had implemented.
-
Hi Wes,
I am trying to do something similar to Andrew, and everything works great thanks to the lines of code you provided as long as my Help Center is in English. But we are planning to have it in different languages, which means that I need to change the titles of the categories in the buttons and the web address that you are pointing for each language. Which is a good way to do it? Maybe a sort of controller in HTML... something like if(language == English) { ...} if(language == Japanese) { ....}. How do you code this in HTML?
Thank you for your help!
Marina
-
Hi Marina - There are a couple of ways you can accomplish this. You could have different Div's with the different languages that are hidden but based on the language selected it would unhide that Div. You can also accomplish this through JQuery by doing something similar to what you stated.
if(currentLanguage === 'Japanese') {
$('input').attr('placeholder','TEXTINNEWLANGUAGE');}The last sentence there would need to be changed to the correct class. I would need to actually see your Help Center to know what you called that class.
-
Wes,
Thanks a lot for the fast answer. I think the best way to go here is to use the Div's proprieties directly in HTML. Indeed, your Java script can work but it only modifies the name that appears on the icon, and not the url that I open by clicking on the icon (I need to be able to modify that as well, as same page in different languages has different corresponding url). So I am trying something like:
<ul class="category-list", style="visibility: hidden; display: none;">
<li>
<a href="/hc/en-us/categories/200150036-The-Hitchhiker-s-Guide-to-EnSight"><i class="fa fa-book fa-2x"></i><br />The Hitchhiker's Guide to EnSight</a>
</li></ul>
<ul class="category-list">
<li>
<a href="/hc/it/categories/200150036-Guida-ad-EnSight-per-autostoppisti"><i class="fa fa-book fa-2x"></i><br />Guida ad EnSight per principianti</a>
</li>Now, all I need is a way to control the "style="visibility: hidden; display: none;" based on the language selected. Any suggestion here?
Thanks for all your help and time.
Bests,
Marina
-
You can actually modify both the link and the text via JQuery. For example here is some code that wrote the other day for someone that is changing both the text and link on the Search Page.
$("h2.search-results-subheading:contains('Community')").replaceWith('<h2>Partner Discussion <a href="/hc/communities/public/topics" class="search-results-subheading-link"> browse</a></h2> ');
$(".search-results-column a:contains('browse Community')").text('browse Partner Discussion');For the route you are going you are going to control the display via jquery so it would look something like this. My below example is using Dynamic Content which you could use here as well. Hopefully this will help you into the right direction.
HTML to add:
<div id="promoted" style="display: none;">{{dc.promotedarticles}}</div>
JQuery to add:
$("h3:contains('Promoted articles')").text($('#promoted').text());
-
Wes,
I managed to make it work. Actually, using dynamic content was enough. I was not expecting it to be able to feed also the url field, but it looks like it works with no problem. So, now just one line of HTML takes care of all of it:
<li>
<a href={{dc.links\_guide}}><i class="fa fa-book fa-2x"></i><br />{{dc.guide}}</a>
</li>Pretty powerful this dynamic content.
Thanks a lot for your time and suggestions!
-
@Marina - I knew if I pointed you in the right direction you would figure it out. Also, thanks for posting your code as someone else will be looking for the exact same thing. If you need any additional help just let me know.
I also have alot of useful code through my custom community theme. You can take a look at some of the code from the following post.
https://support.zendesk.com/entries/41702416
-
@Marina, yes, thanks for sharing your code! I'm sure it'll help someone else.
I haven't followed along too closely...but if what you did is different from Wes's original tip, maybe it should be a separate tip??
If so, I'd love for you to post it as a new tip. :)
-
Hi Wes,
Great thread. This is very helpful.
I am new to Zendesk a happy user. We would like to replace the Black Boxes in the Humble Squid theme with the Large Icons (white boxes, icons, button, etc.) exactly as you show in your example.
Can you give me some pointers on how to do this. I have six categories on my Help Central.
-
Hi James and welcome to the Zendesk family. I'll be glad to help you get your Help Center up and going. The example of the boxes above were created with the bootstrap framework and I will be glad to pass you that code however you will need to add the Bootstrap framework into your Help Center. To get started take a look at these two tutorials.
https://support.zendesk.com/entries/27080976-Help-Center-Responsive-Design
https://support.zendesk.com/entries/26807203
Please make sure you are on a plan above the Starter Plan as you are unable to customize the Help Center from a starter plan. This should get you started and if you need any additional help just let me know. I also just recently helped build two help centers for other users so I will be glad to help get yours built also if needed.
-
Hi Wes,
We were planning on starting with the Starter Plan (we are a startup) and switching to Regular after we got products on the market.
I have been wondering what you can/cannot do in terms of customization with the Starter Plan. How does Zendesk distinguish between Starter Plan customization and Regular plan customization?
-
Take a look here: http://www.zendesk.com/product/pricing/
Scroll down to you see Customer Self Service and what you are looked for his Advanced Customization as you can see its not available on the Starter Plan. Once you do decide to move up then you will be able to fully customize your entire Help Center (HTML, CSS, JavaScript\JQuery).
The only sections that you currently cannot customize is the "Community", "Login Page", and "Registration Page" - those pages will be coming at some point in the future
Hope this helps and let me know if you need any additional help
-
The Pricing Table uses the term "advanced customization", which is pretty vague.
Does "advanced customization" mean editing the theme CSS, HTML, etc. in any form? So that someone on the Starter Plan does not even see the "customize theme" content?
-
@James - That is correct you will not have access to the CSS, HTML, etc on the Starter Plan.
-
Hi Wes,
We are really interested to understand we can reproduce a similar effect as the following one:
https://support.zendesk.com/attachments/token/yfrvjrlvwrftf1p/?name=wes_HC-FAHome.png
Our target is too include a button "Submit a request" to every boxes of the we need to access to the content related to the tag {{category_list}}, in order to make some modifications
Nevertheless, it seems that we cannot access to these contents.
Is there anyway to modify these contents in order to not loose the dynamic propriety of this tag (as the languages, etc...)
Thanks
-
@Matthieu - I believe I have the exact code posted in another article https://support.zendesk.com/entries/26807203-Help-Center-Adding-icons-into-your-theme
Take a look at the Bootply code there. However as you can see my entire boxes are done manually as the only way I can think of keeping it dynamic is via JQuery however someone would have to keep that updated so I can't think of an automatic solution to this. Take a look at the code and please let me know if you have any further questions. If it goes off topic then feel free to send me a email via LinkedIn or we can chat via Skype. I'm currently building a Help Center for someone so I will get back to you as soon as I can.
-
Hi im very new to Zendesk, also to css and i cant seem to add icons to my tiles, any advice please i have tried going with the guide but cannot find where to input the icon,
thanks tom
-
Hi Wes i cant seem to make this work, help appreciated, thanks tom
-
@Tom - Welcome to Zendesk and can you give me some details on exactly what you are trying to add. There is no CSS needed for this as everything is done directly in the HTML tab.
On your home page just add the below code and you then should see a button: You can select any icon from here:
http://fortawesome.github.io/Font-Awesome/icons/
<aclass="btn btn-lg btn-success"href="#"><iclass="fa fa-flag fa-2x pull-left"></i>Button example</a> -
Hi Wes i am trying to at icons on to my category tiles, i also want to move the headings down in the boxes, as i said im a newbie to this.
this is my help centre
https://point2educate.zendesk.com
also i want my logo to take the background colour
thanks tom
-
@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
Post ist für Kommentare geschlossen.
112 Kommentare