Home › Forums › Themes Support › Pangja › How to add new SVG class icon to Pangja theme
- This topic has 7 replies, 4 voices, and was last updated 2 years, 7 months ago by
admin.
-
AuthorPosts
-
November 13, 2019 at 1:12 am #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 classStep 3: Use that icon has just created in Shortcode Haru Icon Box:
Hope this help you!Thanks for reading!*****
Best regards,HaruThemeDecember 7, 2019 at 6:52 pm #4548I do this but not work !! and not show my icon SVG
December 8, 2019 at 2:31 pm #4549Hi 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:*****
Regards,
HaruThemeDecember 10, 2019 at 4:11 am #4553This reply has been marked as private.December 10, 2019 at 11:21 am #4557Hi,
We have just updated the code.
You need change size of SVG image.
Hope this help!****
Regards,
HaruThemeFebruary 19, 2021 at 1:58 pm #8358I followed your steps. Not working.
February 20, 2021 at 11:08 am #8363We 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,
HaruThemeFebruary 20, 2021 at 1:58 pm #8365You 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.
-
This reply was modified 2 years, 7 months ago by
-
AuthorPosts
You must be logged in to reply to this topic.