Почему не показывается изображение внутри тега?

Question

[Jake Taylor]

Хочу вставить логотип на сайт используя изображение в формате png, помещенное с помощью css в тег <span>.

Если вставлять иконки FontAwesome - всё работает.
Но почему не показывается изображения по url?

https://jsfiddle.net/f1068eyn/1/

Answer 1

[Юрий]

Потому что у вас картинка задана фоном для псевдоэлемента, у которого нет ни ширины, ни высоты, ни обязательного свойства content:

.icon-logo:before {
    display: block;
    content: '';
    width: 110px;
    height: 40px;
    border: 1px solid black;
    background-image: url("https://png.pngtree.com/element_pic/00/16/07/115783931601b5c.jpg");
    background-size: 110px 40px;
}

Comments

[Jake Taylor]

Сделал как Вы написали, но всё равно пусто. Сервер развернут на Tomcat, иконка расположена в /img/logo.png. Делаю вот так:

.icon-logo:before {
    display: block;
    content: "";
    width: 110px;
    height: 100%;

    background-image: url("/img/logo.png");
    background-size: 110px 40px;
}

В результате получаю:


Иерархия папок такая:

webapp/img/logo.png
webapp/index.html

[Ankhena]

Jake Taylor, слеш лишний
url("img/logo.png");

[Jake Taylor]

Ankhena, сделал вот так: background-image: url("img/logo.png"); - результат тот же. Какие ещё варианты?

CSS:

.menu-item {
    text-decoration: none;

    display: flex;
    align-items: center;
}

Пробую вставить вот так:

<a class="menu-item" href="/"><span class="icon-logo"></span></a>

[Ankhena]

Jake Taylor, Открывайте консоль в инструментах разработчика и смотрите по какому пути браузер ищет картинку и сравнивайте с тем, где она лежит.

https://jsfiddle.net/369njra8/

[Jake Taylor]

Ankhena, Ох уж эта Ubuntu, переименовал заново файл с иконкой и всё заработало. Что это было вообще?