Help Center Tutorial: Add a home icon to your breadcrumb navigation

13 Comments

  • Jessie Schutz
    Zendesk Customer Care

    Thanks for the great Tip, Baruch! And welcome to the Zendesk Community. :)

    0
  • Heather Rommel
    Community Moderator
    Zendesk Luminary
    The Product Manager Whisperer - 2021

    This is great, thank you! Do you happen to know how to customize the house icon to something different? Thanks in advance.

    0
  • Baruch Moskovits (SF)

    Hey Heather, 

    Yes, you can customize the icon. The icons are part of a library called Entypo. The library is included with your Zendesk theme by default. So you can choose any of the Entypo icons without having to add another library to your theme. Here is a full Entypo character map: http://fontello.github.io/entypo/demo.html

    So you just need to replace the \2302 text with the desired character code.

    0
  • Dan Cooper
    Community Moderator

    @Baruch, the github link in your comment doesn't appear to be working when clicked on, but you can typing in the link works. 

     

    0
  • Baruch Moskovits (SF)

    @Daniel, good catch. I updated the link. 

    0
  • Jacob the Moderator
    Community Moderator
    Zendesk Luminary

    Great tip Baruch I love it!

    0
  • Heather Rommel
    Community Moderator
    Zendesk Luminary
    The Product Manager Whisperer - 2021

    Tried it and it works! Thank you again!

    0
  • Manuel Zimmermann

    Hello there!

     

    Thank you for the tip.

    I'm wondering if there is a way to remove the help center name. We'd like to have only the icon instead.

    Thank you very much in advance.

    0
  • Brett Bowser
    Zendesk Community Manager

    Hi Manuel,

    Looks like Trapta replied to your other post regarding this question: Updating the breadcrumbs in Help Center to match a custom Community name

    Hope this helps!

    0
  • Harshita Sharma

    Tried this on but the Home icon doesn't look the same and it's not so apparent. Is there anything I can do to make it look exactly as it's shown above?

    0
  • Christopher Kennedy
    Zendesk Developer Advocacy
    Hi Harshita,
     
    I'm not seeing this in my testing.  Can you share the CSS snippet that you're adding?
     
    Best,
    0
  • Harshita Sharma

    Hey Christopher Kennedy !, yes I removed it when it wasn't appearing alright. I have put it again on the help center. You may check it now. https://help.engagedly.com/hc/en-us/categories/4408636104473-Employee-Guide-Home-

    I have added the exact same CSS snippet as referred above. 

    .breadcrumbs li:first-child a:before {
    display: inline-block;
    font-family: "entypo";
    content: '\2302';
    padding-right: 5px;
    }

    Thanks in advance!

    0
  • Christopher Kennedy
    Zendesk Developer Advocacy
    Hi Harshita,
     
    Thanks for the update.  I was able to pin down what you're seeing.  Entypo is no longer included as a theme font in v2 of the Templating API that themes are currently using.  Though it's possible for you to create an SVG image for the icon to use, as noted in  Entypo's FAQ.
     
    Best, 
    0

Please sign in to leave a comment.

Powered by Zendesk