How to add new SVG class icon to Pangja theme

[admin]

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, 4 months ago by admin.
• This topic was modified 3 years, 4 months ago by admin.
• This topic was modified 3 years, 4 months ago by admin.
• This topic was modified 3 years, 3 months ago by admin.

[shentia]

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

[admin]

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

[signsexperts]

This reply has been marked as private.

[admin]

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

****
Regards,
HaruTheme

[baytarlardijital]

I followed your steps. Not working.

[admin]

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

[admin]

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, 1 month ago by admin.

[Author]

Posts