Help Center – Adding icons into your theme

@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>&nbsp');

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>&nbsp');

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!

http://support.swizznet.com/hc/en-us

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.

@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