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

Viewing 8 posts - 1 through 8 (of 8 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 3 years, 10 months ago by admin.
    • This topic was modified 3 years, 10 months ago by admin.
    • This topic was modified 3 years, 10 months ago by admin.
    • This topic was modified 3 years, 9 months ago by admin.
    #4548
    shentia
    Support Expired

    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
    Support Expired
    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

    #8358
    baytarlardijital
    Support Expired

    I followed your steps. Not working.

    #8363

    We see you are using for Header.
    And not use for Haru Icon Box shortcode.
    In this case you can simple add image tag in the code for display.
    If you want to add icon you must use this code like this:

    .icon-test {
        -webkit-mask-image: url(https://demo.harutheme.com/pangja/wp-content/themes/pangja/assets/images/icon-printer.svg);
        mask-image: url(https://demo.harutheme.com/pangja/wp-content/themes/pangja/assets/images/icon-printer.svg);
        background-color: #006ad0;
        background-repeat: no-repeat;
        background-size: cover;
        width: 40px;
        height: 40px;
        display: block;
        color: red;
    }

    However it still depend on CSS of element you are using!

    ***
    Regards,
    HaruTheme

    #8365

    You can see in your case your image is too large (512×512). You should resize it to fit the width and height in CSS code.
    We tested with one of our class and it’s working fine here:
    https://prnt.sc/101wvtb

    .icon-printer {
        -webkit-mask-image: url(https://www.demo.harutheme.com/pangja/wp-content/themes/pangja/assets/images/icon-printer.svg);
        mask-image: url(https://www.demo.harutheme.com/pangja/wp-content/themes/pangja/assets/images/icon-printer.svg);
        background-color: #006ad0;
        background-repeat: no-repeat;
        background-size: cover;
        width: 40px;
        height: 40px;
        display: block;
    }

    Hope this helps!

    ****
    Regards,
    HaruTheme

    • This reply was modified 2 years, 7 months ago by admin.
Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.