Блог

Я пытаюсь разместить значки для своей навигационной панели, однако отображаются только первые два, а другие нет. Значки загружаются в браузере (проверяется в консоли).

Использование 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-файлов есть настройки ширины и высоты, которые заставляют их отображать до огромных 512 пикселей. Они действительно видны, но все, что вы видите, это их прозрачный фон в верхнем левом углу. Отредактируйте их, чтобы удалить атрибуты height и width , чтобы они могли свободно изменять размер (см. Первые два SVG для сравнения).