Inline Search formatting

[kstidham]

I am using the Inline Search in a global block. I formatted the CSS to look just like I want it but it has a eyeglass icon. How can I replace that with the text “Search”? It is in the footer where the search field reads “I am looking for…”. http://staging.edckc.flywheelsites.com/template-sub/

I have the same issue with an inline form where I want to submit button out to the right of the two fields that are inline horizontally.

Please advise. Thank you.

[ruenel]

Hello Keith,

Thanks for writing in!

Regretfully there isn’t any setting that will change the icon. You need to add CSS code into X > Theme Options > CSS . You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use.

By default, the search icon is loaded as an SVG and is using this built in CSS:

.x-search-btn svg {
    display: block;
    width: 1em;
    height: 1em;
    margin: 0 auto;
    line-height: inherit;
    stroke: currentColor;
}

Therefore, in order to accomplish what you have in mind, you will need to add this custom CSS;

.x-search-btn svg {
    display: none;
}

.x-search-btn:before {
    content: "Search";
}

Note: If you are unfamiliar with code and resolving potential conflicts, you may select our One or Care service for further assistance. We are unable to provide support for customizations under our Support Policy.

Best Regards.