Removing Icons from All Headers

Search Best Practices - Search Front-End
1

I’m trying to remove the icons from the section headers and left align the vertical names in the header element.

I commented out the icons for each config, but this just had the icon default to the star icon.

image
image1164×524 17.3 KB

I tried locating this in the html.hbs file and the individual pages files as well to remove the element, but was unable to find it.

Any thoughts?

Thanks!
Ariana

2

Hi Ariana,

The easiest way to hide this is via CSS. You can find the class of the icon in the title bar through inspect element, and add the following CSS to hide it.

display: none;

Let us know if this works!

3

Hi Amani!

I tried to do it this way, but I’m still seeing the icons displayed. Here is what I implemented:

image

I made sure the element I’m targeting is correct because in Inspect, I performed the same change and it had the expected behavior.

Any thoughts?

Thanks!!

4

Hi Ariana,

It doesn’t look like IconComponent is listed as a class (it’s a data-component, not something we would reference in CSS) - instead, try targetting the class Icon.

image

The below should work:

// Remove icons
  .HitchhikerResultsStandard-viewMoreLabel {
    .Icon {
        display: none;
    }
  }
  .HitchhikerResultsStandard-title {
    .Icon {
      display: none;
    }
  }
5

That’s what it was! Thanks for your help!

6

I just wanted to follow-up that whilst I was successful in removing the header icons, the “View More” chevron is still visible.

I have this in the code:

image

However, the chevron is still showing:

image

When I updated the icon class in-line within the Inspect tool, it worked so not sure what my next steps are. Thanks for your continued help!

7

Hi Ariana,

Pay attention to the HTML structure - it is important when determine how to structure your CSS.

image
image1020×862 124 KB

The Icon is not nested in the viewMoreLabel class, so your rule wouldn’t apply. Try targetting the .HitchhikerResultsStandard-viewMoreLink instead.

1 Like