Hi bmanfull,
Yes, it’s certainly possible. See here for an example.
One way is to hide the screen reader text and the submit button using css (remember that screen reader text should still be visible on screen readers, i.e. don’t use display:none, use this webpage to guide you – there are many other sites with advice too). Then you add the magnifying glass as a background image for the text input box. Followed by adding a little padding/indent to make it so the text doesn’t overflow the image. This is very similar to the example given above. The issue with this method is that one must press carriage return or some such in order to send the search.
If you wish to have to have it so that you click on the magnifying glass to search, use the following css:
.bop-nav-search input[type=submit]{
color: transparent;
background-image: url(https://api.ning.com:80/files/dr2jDpSXWFhyuoGJ4YR5Fu-PwuqLz70YxRaUcpdKNxf2HI5ECzddyx3NHuPz-MB4ujGS4rEtdtS-aQoFlQrtv*XwVOu*AvC8/searchicon.png);
background-position: center;
background-repeat: no-repeat;
background-size: 24px 24px;
overflow:hidden;
width:24px;
height:24px;
}
.bop-nav-search input[type=submit]::selection{
color:transparent;
}
This makes the text transparent (even when highlighted) and gives the magnifying glass as a background image.
Ensure your selectors match your specific case; if you’ve changed the classes in the admin area, you’ll need to adjust them here too.
Also, you may still need to play around with widths and heights and change the magnifying glass to one of your own choosing.
Additionally, you could use font-awesome (or another icon font provider) as a font-face and use content:"\f002" on input[type=submit]::before to bring in the the magnifying glass instead.
Hope this helps.
Cheers,
Joe
P.S. I’m marking this as resolved as it is a general theme-oriented support question and not one within the remit of this plugin.
