- This topic has 6 replies, 2 voices, and was last updated 5 years, 1 month ago by Siong Boon Lim.
September 13, 2016 at 4:35 am #226057Siong Boon Lim
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.
<i class=”fa fa-square fa-stack-2x”></i>
<i class=”fa fa-search fa-stack-1x”></i>
Appreciate if you can advise on this.
Thank you.September 13, 2016 at 8:04 am #226093TomLead DeveloperLead DeveloperSeptember 13, 2016 at 8:31 am #226099Siong Boon Lim
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?September 13, 2016 at 1:18 pm #226176TomLead DeveloperLead Developer
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>September 13, 2016 at 5:57 pm #226239Siong Boon Lim
The icon disappear after I put fa-inverse.
Was thinking to make it the same as the one on search bar.September 13, 2016 at 11:45 pm #226266TomLead DeveloperLead Developer
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.September 14, 2016 at 2:10 am #226292Siong Boon Lim
Ok. noted. I saw on the example and thought inverse would work.
- You must be logged in to reply to this topic.