How to change the promagnifier icon?

  • fh4545

    (@fh4545)


    4 years, 10 months ago

    Hello,

    I have integrated the Ajax Search Lite on two of our websites, and hereby replaced the search forms from the themes, and it is working very well.

    At our web store we have one issue which I hope you can help us with. All search forms have been replaced except for the one at the home page, which is the Advanced WooCommerce Search. It has a theme matching designed magnified search icon, which is using: <button class="fa fa-search searchsubmit" type="submit">

    How can I replace the Ajax Search magnified search icon with the above font awesome icon and design?

    Thank you and best regards,

    Finn

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author wpdreams

    (@wpdreams)

    4 years, 10 months ago

    Hi,

    That could be doable to some extent. Looking at your page, as well as the custom CSS used to display that icon, I constructed the following custom CSS code, that may do the trick:

    .asl_m .innericon {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    margin-left: -8px !important;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #4a89b8 !important;
}

.asl_m .innericon::after {
    content: "\f002";
    font-size: 24px !important;
}

.asl_m .innericon svg {
    display: none !important;
}

    This should result in something like this: https://i.imgur.com/3oTRDhT.png
    I hope this helps!

    Best,
    Ernest M.

    Thread Starter fh4545

    (@fh4545)

    4 years, 10 months ago

    Hi Ernest,

    Thank you for the code.

    I have tried it and it makes the magnified search icon larger but it doesn’t look like the template magnified search icon.

    Before I uploaded your code to the Additional CSS the Ajax Search was working very well, including in the mobile menu. I am not sure what has happened but today the Ajax search is not working on the mobile, it won’t bring any search up when I test it. I disabled your code to see if this was the issue but still, Ajax Search is not working on the mobile menu.

    I hope you will help me out on this issue. It is more important than the Ajax Search is working at mobiles then the customization of the magnified search icon.

    Thank you and best regards,
    Finn

    Plugin Author wpdreams

    (@wpdreams)

    4 years, 9 months ago

    Hi Finn,

    It looks like, that the menu makes a carbon DOM copy of the search bar for the mobile view, thus there are two different search instances on the page, but their IDs are the same, which is invalid HTML.
    Unfortunately there is no way to fix this from the plugins perspective. For simple uses this would be okay, but I’m afraid this type of menu script solution won’t allow more complex elements as menu items. Optimally menus should not use the cloning method, but in some cases developers need to use that, I am sure that the menu dev had it’s reasons to do so.

    Best,
    Ernest M.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to change the promagnifier icon?’ is closed to new replies.