Why the SVG icon does not appear in heading?

Issue

I try to add a SVG icon in the h1 heading element:

<h1>
            <svg class="my-svg-inline--fa my-fa-w-18">
                <use href="https://www.datanumen.com/wp-content/themes/datanumen/images/icons/icons.svg#shopping-cart"></use>
            </svg> Buy Full Version Now!
        </h1>

But the SVG icon will not appear. THe original URL is https://www.datanumen.com/outlook-repair-order/?nowprocket and I create it in JSFiddle at https://jsfiddle.net/alanccw/871v6jke/3/ to demonstrate the issue. Both will not show the SVG icon.

Update

When test in JSFiddle, I get the following error:

fiddle.jshell.net/:140 Unsafe attempt to load URL https://www.datanumen.com/wp-content/themes/datanumen/images/icons/icons.svg from frame with URL https://fiddle.jshell.net/alanccw/871v6jke/3/show/?editor_console=. Domains, protocols and ports must match.

This issue is discussed in Unsafe attempt to load URL svg

But in the original URL, there is no such a problem but the icon still not show.

Solution

This clearly isn't an issue with your SVG, as you've identified: Your social icons (e.g .../icons.svg#facebook-f) are loading without any problems, and they're being loaded from the same SVG sprite.

The problem is your parent div: cta. You're hiding everything inside it with the following CSS:

single-wporder .hero-page-wporder .cta * {
    display:none;
}

And then overriding the style on cta's child elements, using the following:

.single-wporder .hero-page-wporder .cta h1, 
.single-wporder .hero-page-wporder .cta h1 svg, 
.single-wporder .hero-page-wporder .cta h1 path {
    display: inline-block;
}

The problem is the last line. The shopping-cart svg is set to display:none inside the sprite, so you just need to target it and all its children to display it.

Update your CSS to this:

.single-wporder .hero-page-wporder .cta h1, 
.single-wporder .hero-page-wporder .cta h1 svg, 
.single-wporder .hero-page-wporder .cta h1 svg * {
    display: inline-block;
}

The SVG is now visible, and your CTA elements are still hidden:

Answered By - dave