Фоновые изображения загружаются, но отображаются только два - PullRequest
Новая
       3

Фоновые изображения загружаются, но отображаются только два

0 голосов
/ 10 апреля 2019

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

Использование материализации для стилизации. 

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>

Ответы [ 2 ]

1 голос
/ 10 апреля 2019

Похоже, ваши иконки довольно большие на некоторых ресурсах.

Добавьте следующую строку к вашему CSS: 

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

Рабочая скрипка

0 голосов
/ 10 апреля 2019

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

...