1. Home
  2. Customizer Settings
  3. How to change SVG icon in Woostify?

How to change SVG icon in Woostify?

From Woostify 2.0, the icon font has been replaced by the SVG font. This document will show you how to use SVG font in Woostify.

What is SVG font?

SVG stands for Scalable Vector Graphics and is a new version of the OpenType font system. Characters can be displayed in a variety of colors and transparencies, and some can even be animated, thanks to the SVG glyph format.

How to replace SVG font in Woostify?

You can replace the icon font with the SVG font by using the hook below in the child theme

add_filter( 'woostify_generate_svg_icon', function ( $output, $icon ) {
    if ( 'search' === $icon ) {
        $svg    = 'Your-custom-svg-icon';
        $output = sprintf(
            '<span class="woostify-svg-icon icon-%1$s">%2$s</span>',
            $icon,
            $svg
        );
    }
    return $output;
}, 10, 2 );

The available icons are:

search
hearth (wishlist)
user (my account) 
shopping-cart
eye ( quick view )
angle-left
angle-right
angle-down
close
fullscreen
Was this article helpful to you? No 5 Yes 1

How can we help?