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

Question

我正在尝试为导航栏放置图标，但只有前两个显示其他人没有。图标将加载到浏览器中（在控制台中检查）。

使用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;
}

<ul class="right hide-on-med-and-down">
 <li><a href="#"><ico class="icon-s i-home"></ico>EESLEHT</a></li>
 <li><a href="#"><ico class="icon-s i-faq"></ico>FAQ</a></li>
 <li><a href="#"><ico class="icon-s i-gallery"></ico>GALERII</a></li>
 <li><a href="#"><ico class="icon-s i-event"></ico>ÜRITUSED</a></li>
 <li><a href="#"><ico class="icon-s i-birthday"></ico>SÜNNIPÄEV</a></li>
 <li><a href="#"><ico class="icon-s i-booking"></ico>BRONEERIDA</a></li>
</ul>

Answer 1

看起来您的图标在某些资产上非常大。

将以下行添加到您的css：

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

Working fiddle

Answer 2

不可见的SVG具有宽度和高度设置，迫使它们渲染到512px。它们实际上是可见的，但你看到的只是左上角的透明背景。编辑它们以删除height和width属性，以便它们可以自由调整大小（请参阅前两个要比较的SVG）。