Home Forums Themes Support Pangja How to add new SVG class icon to Pangja theme

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #4408

    Hi all customer,

    In this topic tutorial we’ll help you add new SVG class icon to our theme. SVG image can change color as primary color via CSS. So you can easy change color for all site.

    Step 1: You need create SVG image and get URL to that image (your server or an other server)

    Example: you can find SVG images here: https://www.flaticon.com/free-icons/printer

    Then you can download and upload to your server and get URL like this: https://demo.harutheme.com/pangja/wp-content/themes/pangja/assets/images/icon-scanner.svg

    Step 2: Go to Appearance -> Customize -> Additional CSS and add CSS code for this image:

    .icon-scanner {
    -webkit-mask-image: url(https://demo.harutheme.com/pangja/wp-content/themes/pangja/assets/images/icon-scanner.svg);
    mask-image: url(https://demo.harutheme.com/pangja/wp-content/themes/pangja/assets/images/icon-scanner.svg);
    width: 20px; // change to you svg image width
    height: 20px; // change to you svg image height
    }
    You can change icon-scanner to your icon class

    Step 3: Use that icon has just created in Shortcode Haru Icon Box:

    Hope this help you!
    Thanks for reading!
    *****
    Best regards,
    HaruTheme

     

    • This topic was modified 2 months, 1 week ago by admin.
    • This topic was modified 2 months, 1 week ago by admin.
    • This topic was modified 2 months, 1 week ago by admin.
    • This topic was modified 1 month, 1 week ago by admin.
    #4548
    shentia
    Supported

    I do this but not work !! and not show my icon SVG

    #4549

    Hi shentia,
    Please check it again because we have just checked again and it’s working fine and other customer can do it. You can check feedback in this topic:

    How to change multistep process icon?

    *****
    Regards,
    HaruTheme

    #4553
    signsexperts
    Supported
    This reply has been marked as private.
    #4557

    Hi,
    We have just updated the code.
    You need change size of SVG image.
    Hope this help!

    ****
    Regards,
    HaruTheme

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.