Home Forums Themes Support Shang How to change Heading SVG image in HaruTheme

Tagged: 

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #6057

    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 10 months, 3 weeks ago by admin.
    • This topic was modified 10 months, 3 weeks ago by admin.
    • This topic was modified 10 months, 3 weeks ago by admin.
Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.