Why the SVG icon does not appear in heading?

Question

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.

Any reason why you don't want to use `` for this instead? It can load your SVG. — Brad, Sep 30 '21 at 01:28
@Brad, may not be able to use a symbol in SVG sprite? See my test https://jsfiddle.net/alanccw/871v6jke/6/ — alancc, Sep 30 '21 at 01:46
If you are considering images instead, as Brad advises you, please read this [How SVG Fragment Identifiers Work](https://css-tricks.com/svg-fragment-identifiers-work/) — enxaneta, Sep 30 '21 at 07:47
@enxaneta, Thank you. It seems that I need to revise the SVG file to use viewbox to identify different part of the SVG, which is not desired as rather complex. — alancc, Sep 30 '21 at 08:06
Maybe not as complex (unless you don't have any javascript skills) is a modern Web Component to create the SVG for icons: https://iconmeister.github.io — Danny '365CSI' Engelman, Sep 30 '21 at 08:54

score 2 · Accepted Answer · answered Oct 07 '21 at 04:32

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:

score 1 · Answer 2 · answered Oct 07 '21 at 04:33

1

It appears that a style rule is adding display: none; to the <use> element.

When I disable this style rule, the SVG appears.

answered Oct 07 '21 at 04:33

Brett Donald

6,745
4
23
51

score 1 · Answer 3 · answered Oct 07 '21 at 05:27

It seems that some CSS is setting display:none for the icon in your website. And in the jsfiddle it doesen't show because this Replace your svg code to this in your website. This works perfectly :D.

<svg class="my-svg-inline--fa my-fa-w-18">
<use href="/wp-content/themes/datanumen/images/icons/icons.svg#shopping-cart" style="display: block;"></use>
</svg>

Why the SVG icon does not appear in heading?

3 Answers3