为什么 SVG 图标没有出现在标题中？

Question

我尝试在 h1 标题元素中添加一个 SVG 图标：

<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>

但是SVG图标不会出现。原来的 URL 是 https://www.datanumen.com/outlook-repair-order/?nowprocket and I create it in JSFiddle at https://jsfiddle.net/alanccw/871v6jke/3/ 来演示这个问题。两者都不会显示 SVG 图标。

更新

在 JSFiddle 中测试时，出现以下错误：

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.

此问题在

中讨论

但是原来的URL没有这个问题但是图标还是不显示

Answer 1

正如您所确定的那样，这显然不是您的 SVG 问题：您的社交图标（例如 .../icons.svg#facebook-f）加载没有任何问题，并且它们是从同一个 SVG 精灵加载的.

问题是你的 parent div: cta。您使用以下 CSS:

隐藏了其中的所有内容

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

然后覆盖 cta 的 child 元素的样式，使用以下内容：

.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;
}

问题出在最后一行。 shopping-cart svg 在 sprite 中设置为 display:none，所以你只需要瞄准它和它的所有 children 来显示它。

将您的 CSS 更新为：

.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;
}

SVG 现在可见，您的 CTA 元素仍然隐藏：

Answer 2

样式规则似乎正在将 display: none; 添加到 <use> 元素。

当我禁用此样式规则时，会出现 SVG。

Answer 3

似乎有人 CSS 正在为您网站中的图标设置 display:none。在 jsfiddle 中它没有显示，因为这个在您的网站中将您的 svg 代码替换为此。这非常有效 :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>

为什么 SVG 图标没有出现在标题中？

Why the SVG icon does not appear in heading?

html

css

svg