我正在尝试为导航栏放置图标,但只有前两个显示其他人没有。图标将加载到浏览器中(在控制台中检查)。
使用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>
看起来您的图标在某些资产上非常大。
将以下行添加到您的css:
ico.icon-s{
height: 2em;
width: 2.5em;
top: .360em;
position: relative;
display: inline-flex;
align-self: center;
background-size: contain;
}
不可见的SVG具有宽度和高度设置,迫使它们渲染到512px。它们实际上是可见的,但你看到的只是左上角的透明背景。编辑它们以删除height
和width
属性,以便它们可以自由调整大小(请参阅前两个要比较的SVG)。