Forums › Forums › Search & Filter Pro › Magnifying Glass icon in search submit button

Tagged: , , ,

Viewing 3 posts - 1 through 3 (of 3 total)
  • Anonymous
    (Private)  August 18, 2019 at 5:58 pm #219197

    Hello,
    I have been trying to add a magnifying glass icon using CSS ::before and fontawesome but I can’t see anything on screen, I tried everything, even position absolute, fixed, z-index, background, width… anything I could think, nothing shows up for the ::before pseudo-element for the submit button.

    URL: https://class1.co.il/test/

    Please help!

    Trevor
    (Private)  August 19, 2019 at 2:19 pm #219237

    Ah, I think you need to put the character unicode in the label box (in the form settings) for the submit button and use CSS to change the font for the submit button to Font Awesome. So, for the search icon it is &#xf002 (Font Awesome Free V3).

    See where to add it in this screenshot:

    https://www.screencast.com/t/B61I5BaDhzXF

    You need to set the font for the button to Font Awesome like this:

    .sf-field-submit submit {
  font-family: FontAwesome;
}
    Anonymous
    (Private)  August 19, 2019 at 4:28 pm #219267

    Thanks, that solved it.
    I’m leaving this here for future reference (font awesome html entities): http://dnozay.github.io/cheatsheet/2014/09/23/fontawesome.html

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)