[Support request] Search icon font

[Siong Boon Lim]

Hi Tom,

I understand that the search icon beside the header’s search bar is a font from FontAwesome.

Currently to duplicate the search icon for my page content, I did a screen capture and insert the search icon as a “search-icon.png” image. It looks the same as the onne embedded on the generatepress search bar.

May I know how can I use fontawesome to have the icon embedded in my content page.

I did the following html codes but it does not work on my home page http://www.pic-control.com.
The color is also not the same as the one in the header.

<span class=”fa-stack”>
<i class=”fa fa-square fa-stack-2x”></i>
<i class=”fa fa-search fa-stack-1x”></i>
</span>

Appreciate if you can advise on this.
Thank you.

[Tom]

This should work: <i class="fa fa-search"><!-- icon --></i>

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Siong Boon Lim]

Hi Tom,

I find that the code you provide is quite similar to what I have tried.
The search icon displayed is still not the same as the one originally in the GeneratePress search bar.

So what I did is (flip horizontally),
<i class=”fa fa-search fa-flip-horizontal”><!– icon –></i>

The search icon (magnifying glass) is now with the correct orientation.
The font color is suppose to be light green with dark green for the font’s background as in the GeneratePress search bar.

So I add in “fa-inverse”.
<i class=”fa fa-search fa-flip-horizontal fa-inverse”><!– icon –></i>

This time round the icon disappear.
I am thinking if it is possible to get the exact same icon same inverse color that is default for the generatepress search bar?

[Tom]

The search in the navigation bar mimics whatever settings you have set for your menu items, so you’ll need to match that CSS to your new icon.

To do that, you’ll probably need to wrap your icon in a link: <a href="#" class="custom-search"><i class="fa fa-search fa-flip-horizontal"><!– icon –></i></a>

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Siong Boon Lim]

same problem.
The icon disappear after I put fa-inverse.
Was thinking to make it the same as the one on search bar.

[Tom]

fa-inverse won’t make it look like the navigation item – you’ll need to apply CSS to the link element surrounding your icon. You can copy the CSS by inspecting the navigation search element using Chrome or Firefox dev tools.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Siong Boon Lim]

Ok. noted. I saw on the example and thought inverse would work.

[Author]

Posts