Change the login SVG icon using CSS

Table of Contents

Update [18.07.2024]

For the main header I have created a field in the header module which gets the main login link icon file and shows it as an image 

<img id="noordlease_login_icon" src="{{module.login_link_icon}}" alt="login link icon" width="20" height="20"><span style="text-transform: none;">&nbsp; {{module.login_link_text}}</span>

For now I used a temprary solution which for the pages with a transparent header, I add the code below to the header tag 

<style>
  #noordlease_login_icon {content: url(https://144575582.fs1.hubspotusercontent-eu1.net/hubfs/144575582/Website%20-%20assets/Website%20-%20logos/SVG/Logo%20Noordlease%20Juli%202024%20RGB_Noordlease%20Beeldmerk%20-%20wit.svg) !important;}
</style>

Main challenge

My challenge today for Noordlease is about the fact that on some transparent headers, the login logo which I created manually in the header module, should be converted to white.

That means I need to find a solution to

1- Replace the proper icon in the module
2- Find a way to replace the image using CSS
3- Find a CSS to change it and invert the icon color

For noe, I will leave it to make sure the other parts are created, then I will get back to it. this should also solve the problem when scrolling on the black background.

Tagged: