Make svg icons in header smaller

[flammagreg]

Hi guys, how can I make all of the svg icons in the header smaller? Any help would be greatly appreciated!

website: fhuzeo.com

[sanico-software]

Hi Flammagreg, 

I assume you are talking about the magnifying glass and other symbols next to it (correct me if I am wrong). 

If you look at the attached image, you will see that there are class names on the svgs that dictate its width and height. You will need to go into the code and change or remove these current classes and update it with what you really want. This will involve using the code editor Shopify provides or your own code editor if you have the skills. 

Hope this helps! 

[PageFly-Richard]

Hi @flammagreg 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
header .header__icon svg.icon {
    width: 20px;
    height: 20px;
}
header .header__icon--cart .icon {
    width: 36px;
    height: 36px;
}
</style>

Your store looks very nice, warm and elegant, but in my opinion, you should consider to add a heading banner + CTA button on your main banner

The banner is very significant in hero material. It is the first thing customers see when they visit your website. Let's get consumers to know exactly what you're having in 5 seconds first.

Hope this can help you solve the issue 

Best regards,

Richard | PageFly

[BSSCommerce-B2B]

Hi @flammagreg 

Is this a title you want to change?

To change the title, please follow these steps.

Step 1: Go to Admin -> Online Store -> Themes -> Edit Code

Step 2: Find the base.css file and paste the following code at the bottom of the file. Then save the file

.header__heading-logo-wrapper img {
    width: 50px;
}

You can change the width to fit the website

This is the result after the change

I hope these instructions will help you. If they are helpful, don't forget to like and mark as the solution. Have a nice day sir!

[INA_MSWEB]

Hello,

I am San from MS Web Designer.

Go to Themes > Edit code > Theme.liquid > at the bottom place this code before </body>

<style>
.header__icon .icon{vertical-align: unset !important;}
.header__icon--cart .icon{width: 25px !important; height: 25px !important;}
.header__icon .icon.icon-account,
.header__icon .icon-search,
.header__icon .icon.icon-hamburger{width: 14px !important; height: 14px !important;}
</style>

Do let me know in case of any concerns.

Regards,

San