Support » Themes and Templates » [Resolved] Searchform submit icon instead of text

[Resolved] Searchform submit icon instead of text

  • d4z_c0nf has very kindly coded for me here my ideal search form which behaves like the one above in the WP header – ie it stays aligned with the right edge of my slider when the viewport is narrowed.

    Now I would like to place a magnifying glass icon as the background image in the rectangular searchsubmit box to the right of the text entry field and I’d be grateful for some help.

    Happy to use the WP dashicon shown here if it makes life easier.

    Thanks for any help.

Viewing 5 replies - 1 through 5 (of 5 total)
  • There are tedious issue using a font based icon “into” a button, z-index&Co to preserve the click on the submit.
    Let’s try this other solution, for example:

    #navbar-top #searchsubmit{
    	background: url(http://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg) no-repeat;
    	width: 22px;
    	height: 22px;
    	background-size: 22px 22px;
    	border: none;
    	border-radius: 0px;
    	box-shadow: none;


    Eureka! Thank you AGAIN d4z_c0nf – that is a thing of beauty.

    Finally, how can I replicate it on the search results page where the main-wrapper searchform still has a black rectangle?

    remove that #navbar from the code above 😀

    That did it. Silly me. Just a bit of CSS alignment and @media tweaks now and this is done and dusted – although I’m a bit perplexed by how the search function works so I’ll start a new topic for that.

    Can’t thank you enough d4z_c0nf – this has been on my To-Do list since Day 1 almost 6 months ago. I kept experimenting and failing. Asked the question here a few times but didn’t find anything that worked for me until you burnt the midnight oil for me last night.

    You’re a Customizr colossus.

    Eheh thank you chappie, you’re too kind, as always 😀

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘[Resolved] Searchform submit icon instead of text’ is closed to new replies.