我尝试在h1 heading元素中添加一个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-repais-order/？nowprocket，我在https://JSFiddle.net/alanccle.net/alanccw/871v6jke/3/的两者都不会显示SVG图标。

更新

在JSFiddle中测试时，我得到以下错误:

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

此问题在不安全尝试加载URL svg

中讨论

但是在原始URL中，没有这样的问题，但是图标仍然没有显示。

---

顺晟科技：

这显然不是您的SVG的问题，正如您已经发现的：您的社交图标（例如）加载时没有任何问题，并且它们是从同一个SVG sprite加载的。

问题出在您的父div：。您可以使用以下CSS将所有内容隐藏在其中:

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

然后使用以下方法重写子元素上的样式:

<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被设置为在sprite中，所以您只需要将它和它的所有子级设置为目标来显示它。

将CSS更新为：

<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，CTA元素仍然隐藏:

似乎正在向元素添加样式规则。

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

似乎有些CSS正在为您网站中的图标设置。 在jsfiddle中，它不会显示出来，因为 将您的svg代码替换到您的网站中。这工作得很好:d

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