- This topic has 6 replies, 2 voices, and was last updated 6 years, 4 months ago by
Siong Boon Lim.
-
AuthorPosts
-
September 13, 2016 at 4:35 am #226057
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.September 13, 2016 at 8:04 am #226093Tom
Lead DeveloperLead DeveloperThis 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-developmentSeptember 13, 2016 at 8:31 am #226099Siong 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?September 13, 2016 at 1:18 pm #226176Tom
Lead DeveloperLead DeveloperThe 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-developmentSeptember 13, 2016 at 5:57 pm #226239Siong 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.September 13, 2016 at 11:45 pm #226266Tom
Lead DeveloperLead Developerfa-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-developmentSeptember 14, 2016 at 2:10 am #226292Siong Boon Lim
Ok. noted. I saw on the example and thought inverse would work.
-
AuthorPosts
- You must be logged in to reply to this topic.