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



Posted May 05, 2017

This tutorial will show you how to add a friendly home icon to your Help Center breadcrumb navigation using only CSS.

Before: 

After: 

Directions:

All you need to do is add a small snippet of text to your CSS.

  1. Open Admin Guide > Settings > Customize Design.  
  2. Click the Edit Theme link.

  3. Open the CSS tab
  4. We can add our snippet between any element on the CSS page. CSS doesn't care where you place your elements. But for hygiene sake, let's place the snippet near the existing breadcrumb elements. Find the line between the .breadcrumbs li  element and the .breadcrumbs li + li::before element. See the example below.   
  5. Paste the following text between in this space.
    .breadcrumbs li:first-child a:before {
    display: inline-block;
    font-family: "entypo";
    content: '\2302';
    padding-right: 5px;
    }

I tested this on the Copenhagen and Swiftest Elk themes. Let me know if you have any issues.


0

13

13 comments

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


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


Hi Harshita,
 
I'm not seeing this in my testing.  Can you share the CSS snippet that you're adding?
 
Best,

0


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


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


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


Tried it and it works! Thank you again!

0


Great tip Baruch I love it!

0


@Daniel, good catch. I updated the link. 

0


@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


Sign in to leave a comment.

Didn't find what you're looking for?

New post