How to display the magnifying glass within the searchbox

andrewwinkler

I'm trying to replicate the look and feel of the searchbox on this forum page. What do I need to do to show display the magnifying glass in front of the search label inside the search box?

saguaros

andrewwinkler
Hi,

You can use the CSS ::before Selector to add style for it, for example:

.finder::before {
font: normal normal normal 14px/1 FontAwesome;
content: "\f002";
}

andrewwinkler

I've inserted in my custom.css the code

.finder::before {
font: normal normal normal 14px/1 FontAwesome;
content: "\f002";
}

It made no difference. Did I miss anything?

andrewwinkler

Update:

I copied to the smartsearch box related code into mainnav.php to display the box inside the menu block where I actually would prefer it to be, on the right, next to the main menu. (I'm still following up on that problem on a separate ticket.) There the magnifying glass is being displayed, albeit on the left of the search box, rather than inside, on the left of the search field, the way it's styled on the joomlart support forum.

saguaros

andrewwinkler

Hi,

I didn't see the search position in the mainnav now, did you remove it?

Kindly share the FTP account also.

andrewwinkler

Sorry, I had removed it because it messed up both the mainnav and the logo block. The mainnav is now too high and the searchbox which is supposed to be displayed on the right of the mainnav block is hiding behind the logo. I've now put it back in.

saguaros

andrewwinkler

Could you share the FTP account also?

andrewwinkler

Done.

aman204

andrewwinkler To be more precise and avoid confusion/ambiguity in addressing your query, Kindly provide screenshot marked with annotations showing as to how you wish to have it seen. This should really help to ensure that we are able to address your query more appropriately.

Also, There could be two module instances seen for specific search module so if you would provide screenshot, that would remove any sort of ambiquity

andrewwinkler

The problem with the magnifying glass - amongst other things - has gone away by switching template from JA Social II to Socialize. Thank you for your follow up.