How to adjust size of custom title icons?

Search Best Practices - Search Front-End
1

Hi Team,

I’ve successfully added custom title icons using URLs provided by my client. However, as you can see in the image below, the icons are very small in the experience. How do you change the size of the icon?

I’ve inspected the page and see that the icon itself is in the .Icon-image element. There is an object-fit: contain; property applied to the element. I’ve utilized the following w3 schools article, but have not had any luck adjusting the size of the image. Does anyone have some guidance on how you can appropriately alter the size of a custom image?

Thank you,
Austin

2

Hi Austin,

You can do this by adjusting the ‘width’ and ‘height’ property of the icon. Try the below:

  .yxt-Results-titleBar .Icon-image {
    width: 1.5em;
    height: 1.5em;
  }