Html 加载背景图像，但仅显示其中两个

我正在尝试为导航栏放置图标，但只显示前两个图标，其他不显示。图标在浏览器中加载（在控制台中签入）

使用materialize进行样式设置

ico.icon-s{
    height: 2em;
    width: 2.5em;
    top: .360em;
    position: relative;
    display: inline-flex;
    align-self: center;
}
.i-home{
    background: url(icons/house.svg) no-repeat;
}
.i-faq{
    background: url(icons/question.svg) no-repeat;
}
.i-gallery{
    background: url(icons/painting.svg) no-repeat;
}
.i-event{
    background: url(icons/event.svg) no-repeat;
}

不可见的SVG具有宽度和高度设置，强制它们渲染为巨大的512px。它们实际上是可见的，但你所看到的只是它们左上角的透明背景。编辑它们以删除

高度

和

宽度

属性，这样它们就可以自由调整大小（请参见要比较的前两个SVG）。

看起来您的图标在某些资产上相当大

在css中添加以下行：

ico.icon-s{
    height: 2em;
    width: 2.5em;
    top: .360em;
    position: relative;
    display: inline-flex;
    align-self: center;
    background-size: contain;
}

---

链接中的文本是否显示？您能否添加一个js FIDLE或代码片段来演示该问题？

ico.icon-s{
    height: 2em;
    width: 2.5em;
    top: .360em;
    position: relative;
    display: inline-flex;
    align-self: center;
    background-size: contain;
}