Question

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

使用实体化样式。

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具有宽度和高度设置，迫使它们渲染为512像素。它们实际上是可见的，但是您所看到的只是它们左上角的透明背景。编辑它们以删除height和width属性，以便可以自由调整它们的大小（请参阅要比较的前两个SVG）。

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

2 个答案: