Comment to 'How to change the search icon in the top search box?'
Comment to How to change the search icon in the top search box?

  • Hi @LeonidS thanks a lot for the code. I wouldn't have figured it out on my own. It works well on Opera and Firefox browsers but not on Chrome. I have cleared my template cache in studio, also my browser's cache. I have even manually deleted my cache files from the /cache/ and /cache_public/ folders. It didn't work. I think that this replace method for custom images in Artificer is not supported by Chrome. I have tried both Chrome desktop and mobile. Please could you like to investigate this problem? Thanks

    By the way, how does it work well here on unacms.com? I can see the SVG search icon and I am using Chrome.

    • See older replies...

    • Hi @LeonidS Thanks for your reply. For whatever reason, the new SVG search icon decided to show on Chrome today. Probably because of the way chrome hamdles cache. The old cache is keeped for some times. Yesterday I tried everything even the anonymous mode on both destop and mobile and that didn't work.

      The replacer code you shared has the following parameters width="24px" height="24px". That makes the SVG icon a bit smaller. I have tried to change it to 32px x 32 px to match the size of the other icons in the Member Toolbar as it is here on unacms.com but that didn't work. Do I miss something in the replacer code? I can see here on unacms.com that you use 24x24px and the image is still bigger. Thanks

      • Well, the respective dimensions that are declared in the standard .svg file don't really matter when they are overwritten by CSS. You can control the size however you want via CSS, no matter what values are set inside the SVG file.

        For example:

        svg {
width: 32px;
height: 32px;
}

        This will force any SVG element to display at 32x32px, regardless of its internal width and height attributes.

        The only thing that really matters inside the SVG is the viewBox, because it defines how the content inside scales and keeps its aspect ratio when you resize it with CSS. As long as the viewBox is set properly, you can style the size however you like from outside.

        Also, if the SVG is inline, it’s a good idea to double-check for any other CSS that might affect its size, like max-width, max-height, or font-size if it’s inside a button or toolbar.

        • Please, I know what I am trying to achieve when I asked that specific question to @LeonidS