Help Center – Adding icons into your theme

113 Commentaires

  • Wes Drury
    Actions pour les commentaires Permalien

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

    0
  • Kristina Hoying
    Actions pour les commentaires Permalien

    That worked! Thank you very much!!

    0
  • Kristina Hoying
    Actions pour les commentaires Permalien

    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?

    0
  • Wes Drury
    Actions pour les commentaires Permalien

    @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

    0
  • Giulia Alberto
    Actions pour les commentaires Permalien

    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?

     

     

     

    0
  • Wes Drury
    Actions pour les commentaires Permalien

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

     

    0
  • Giulia Alberto
    Actions pour les commentaires Permalien

    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.

     

     

     

    0
  • Wes Drury
    Actions pour les commentaires Permalien

    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.

    0
  • Wes Drury
    Actions pour les commentaires Permalien

    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.

    0
  • Giulia Alberto
    Actions pour les commentaires Permalien

    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? 

    0
  • Wes Drury
    Actions pour les commentaires Permalien

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

    0
  • Ken Billing
    Actions pour les commentaires Permalien

    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!

     

     

    0
  • Wes Drury
    Actions pour les commentaires Permalien

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

    0
  • Giulia Alberto
    Actions pour les commentaires Permalien

    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.

    0
  • Wes Drury
    Actions pour les commentaires Permalien

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

    0
  • Giulia Alberto
    Actions pour les commentaires Permalien

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

     

    0
  • Wes Drury
    Actions pour les commentaires Permalien

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

    0
  • Giulia Alberto
    Actions pour les commentaires Permalien

    @Wes, yes, it works perfectly.

    Thank you for your reply and best wishes!

     

     

     

    0
  • Wes Drury
    Actions pour les commentaires Permalien

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

    0
  • Renato Lyke
    Actions pour les commentaires Permalien

    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.

    0
  • Wes Drury
    Actions pour les commentaires Permalien

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

    0
  • Sane Nobles
    Actions pour les commentaires Permalien

    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

    0
  • Renato Lyke
    Actions pour les commentaires Permalien

    Hi,

    We I wish to use an image. On click on that image it needs to take me to those Specific categories. 

    Regards,

    Renato.

    0
  • Wes Drury
    Actions pour les commentaires Permalien

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

    0
  • Sane Nobles
    Actions pour les commentaires Permalien

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

    0
  • Wes Drury
    Actions pour les commentaires Permalien

    @Sane - Can you resend the Skype request as I'm logged in now but don't see the request.

    0
  • Tenisha Corrales
    Actions pour les commentaires Permalien

    Hello Wes,

    Currently, I used your Wiry Merchant theme, and I wanted to have the boxes from the Humble Squid theme. So i combined the both! 

    I would like to add icons like you had on the "LARGE ICONS ON THE HOME PAGE:" I installed font awesome, but I'm a bit stumped in how I can add the icons.