[Support request] Search icon font

Home Forums Support [Support request] Search icon font

Home Forums Support Search icon font

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #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.

    #226093
    Tom
    Lead Developer
    Lead Developer

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

    #226099
    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?

    #226176
    Tom
    Lead Developer
    Lead 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>

    #226239
    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.

    #226266
    Tom
    Lead Developer
    Lead 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.

    #226292
    Siong Boon Lim

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.