How to change Heading SVG image in HaruTheme

[admin]

Hi all customer,

In this topic tutorial we’ll help you change SVG image in Heading of our theme.

We’ll use Shang theme as example:

Step 1: Use Inspect tool of Browser to see Heading SVG image like this:

View Larger Image
You can right click on the Heading Element to view it.

Step 2: You will get image SVG url like this: http://dev.harutheme.com/harutheme/shang/wp-content/themes/shang/assets/images/img-scissor.svg

You need upload your own SVG image in Media -> Add New and get new image URL

Step 3: Go to Appearance -> Customize -> Additional CSS and add this code:

.vc_custom_heading.heading_style_4:before {
    width: 49px; // Change to your new image width
    height: 25px; // Change to your new image height
    -webkit-mask-image: url(new_image_url.svg);
    mask-image: url(new_image_url.svg);
}

How to get this: .vc_custom_heading.heading_style_4:before please see in the screenshot above.

Hope this help you all and thanks for reading!

 

*****
Regards,

HaruTheme

• This topic was modified 1 year, 3 months ago by admin.
• This topic was modified 1 year, 3 months ago by admin.
• This topic was modified 1 year, 3 months ago by admin.

[Author]

Posts