Почему не отображаются иконки?

Question

Alex931 @Alex931

Почему не отображаются иконки?

Здравствуйте. Не отображаются иконки. Путь задал верно, иконка в порядке. Может, плагин какой-нибудь не работает. VS code.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Лонгрид</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="div"></div>
</body>
</html>

.div {
    background-image: url(../star_active.png);
}

Иконка находится в той же папке, что и остальные файлы.

Вопрос задан более двух лет назад
172 просмотра

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 1

8 комментариев

Ankhena @Ankhena Куратор тега CSS

Да и размеров у блока нет. Даже если написать на самом деле верный путь, то всё равно не отобразится, пока размер останется нулевым.

Написано более двух лет назад
Павел @Asokr

Ankhena, Так пустой div и не отображает, вы же делаете задний фон блоку. Блок должен иметь размер, или контент, в противном случае он пустой...

Написано более двух лет назад
Ankhena @Ankhena Куратор тега CSS

Павел, я об этом и дописала в ваш ответ для спрашивающего.

Написано более двух лет назад

Alex931 @Alex931 Автор вопроса

Поправил

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Лонгрид</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
    <div class="div">
        <svg class="icon"></svg>
    </div>
</div>
</body>
</html>

/* /* .container {
}
.div {

} */
.icon {
    background-image: url(../star_active.png);
}

Так все работает.

Написано более двух лет назад

Павел @Asokr

Ankhena, Не посмотрел думал автор что-то написал )))

Написано более двух лет назад
Ankhena @Ankhena Куратор тега CSS

Alex931,
Так все работает.

Знатная ерундень в коде.

Написано более двух лет назад
Alex931 @Alex931 Автор вопроса

Ankhena, из-за путей? Или html по-другому можно написать?

Написано более двух лет назад
Ankhena @Ankhena Куратор тега CSS

Alex931, svg лишний и пути неверные.

Написано более двух лет назад

Пригласить эксперта

Ответы на вопрос 1

1 комментарий

Alex931 @Alex931 Автор вопроса

Я вчера вот так сделал, и все работает.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Лонгрид</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
    <div class="div">
        <svg class="icon"></svg>
    </div>
</div>
</body>
</html>

/* /* .container {
}
.div {

} */
.icon {
    background-image: url(../star_active.png);
}

Написано более двух лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- вчера
- 157 просмотров
2

ответа
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- вчера
- 103 просмотра
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- вчера
- 103 просмотра
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- 23 нояб.
- 98 просмотров
0

ответов
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 22 нояб.
- 77 просмотров
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- 22 нояб.
- 55 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 22 нояб.
- 64 просмотра
1

ответ
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- 22 нояб.
- 100 просмотров
1

ответ
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 21 нояб.
- 86 просмотров
2

ответа
HTML

Простой
Почему некорректно отражается текстареа в Osclass evolution?
- 1 подписчик
- 21 нояб.
- 36 просмотров
0

ответов
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Дорвботать приложение под IOS на Swift vocechanger

25 нояб. 2024, в 12:49

50000 руб./за проект

Мат. модель по вероятностям

25 нояб. 2024, в 12:43

20000 руб./за проект

Требуется сделать видео/анимацию конвертирования OST файла

25 нояб. 2024, в 12:12

10000 руб./за проект

Answer 1 · 2022-05-30 11:23:40

Разве это верный путь?
background-image: url(../star_active.png);
Вы выходите из папки, а иконка лежит рядом с css файлом...

Answer 2 · 2022-05-31 00:44:55

weazyq @weazyq

background-image: url(star_active.png);
height: ...;
width: ...;

Ответ написан более двух лет назад

1 комментарий

Почему не отображаются иконки?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт