Tagged: search icon
Hello Kriesi,
I looked through the threads and was unable to find a solution. I would like to replace the search icon with a custom image that is approximately 35px in both height and width.
Hey J_L,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
#searchsubmit {
color: transparent;
background: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png);
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
}
Best regards,
Yigit
Yigit,
Thanks for your reply, I am actually trying to change the search icon in the menu before you click. I believe this is the CSS
#top #menu-item-search > a:before {
}
i did try the below code but the image was very small (same size as fonts in menu)
#top #menu-item-search > a:before {
color: transparent;
background: url(http://www.mypath.com/logo);
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
}
Hi!
Please try using the code as following
#menu-item-search a:before {
color: transparent;
}
#menu-item-search a {
background: url(https://www.mypath.com/logo);
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
}
Regards,
Yigit
We are getting close. When you mouse over the logo it disappears. I would like to make it about 25% bigger in that space. I included a link in the private content section for you to see the behavior.
Hello Yigit,
Were you able to figure out how to correct the above problem mentioned in post
#718580 above.