How can I replace and reorder my website's icons?

[Pam9]

Hey, I would like to replace my  current icons with some others that I already have uploaded in assets.

Also, I want to be able to modify the color and size of those. ( I tried to replace them but couldn't change the color)

Lastly,  I would like the search icon to be first, then the cart and lastly the account icon. (From left to right).

cart-icon.png

search-icon.png

account-icon.png

 My website: https://www.bafaluc.com

[PaulNewton]

@Pam9 All together this is an advanced customization.

The Brooklynn theme uses web-fonts as icons

You would either need to modify the icons font files in the theme assets.

Or modify the theme to use image based icons, such as through the timber.scss file changing .icon-customer:before to be CSS image backgrounds using images from the assets folder.

To change the order of the icons requires  the source order itself in the code often in header.liquid or nav.liquid etc. Technically can be done with only CSS but that's a kludge since the icons are not in their own container apart from the rest of the navigation.

With image based icons to be able change the colors through CSS they need to be transparent masks to let a background color show through, or you have to use CSS filters to fake it.

Otherwise just change the color in the image itself.

Merchants that need customizations like this can contact me at paull.newton+shopifyforums@gmail.com with topic url, store url, theme name, and details.