Support » Plugin: FiboSearch - Ajax Search for WooCommerce » Changing search icon color

  • Resolved Derek Wilcox

    (@themassapothecary)


    I am using just the icon for search on mobile view but it is black by default. How can I change the color or the svg icon that it uses?

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Damian Góra

    (@damian-gora)

    Hello,

    We will add this option in the next plugin release. Currently, you can use following CSS to change icon color:

    
    body .dgwt-wcas-ico-magnifier-handler path {
        fill: #fff;
    }
    

    If you don’t familiar with custom CSS, take a look at this video.

    Best
    Damian

    Thanks for the CSS code. Would be very nice if in a future version the search icon can be customized totally, like bigger size, thicker lines or raplacable with own svg.

    Thread Starter Derek Wilcox

    (@themassapothecary)

    Thank you and yes I agree with @jorix .if that can be added it would be awesome. I’d especially like to atleast make the lines thicker

    Plugin Author Damian Góra

    (@damian-gora)

    Great idea. We will try to add options for customization or we will write a simple guide with copy/paste code on our docs.

    Best
    Damian

    Hi.

    You have a bug in your color customization code. In the declaration of the static function

    public static function getIcon( $name, $class = '', $color = '' )

    You have a third parameter named $color.

    Inside the static function you have:

    $color = ( empty($color) ? '#444' : $color );

    But when you call it you never pass a value to the $color variable. The magnifier gets the #444 color hardcoded in the SVG code.

    public static function getMagnifierIco( $class = 'dgwt-wcas-ico-magnifier', $type = 'magnifier-thin' )
        {
            return apply_filters( 'dgwt/wcas/form/magnifier_ico', self::getIcon( $type, $class ), $class );
        }

    Got to fix this bug 😉

    Best regards,

    Paulo

    body .dgwt-wcas-ico-magnifier-handler path {
    fill: #fff;
    }

    It doesn’t work.

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