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

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);
}

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

Вопрос задан более года назад
133 просмотра

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

Подписаться 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);
}

Написано более года назад

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

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

Войти через центр авторизации

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

HTML

Простой
Не получается поставить поисковую строку справа, что сделать чтобы исправить?
- 1 подписчик
- 12 часов назад
- 46 просмотров
0

ответов
HTML

Простой
С чем может быть связано не правильный вывод изображений?
- 1 подписчик
- 15 часов назад
- 167 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Как задать img источник из svg inline?
- 1 подписчик
- 19 часов назад
- 103 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Смена стилей шапки сайта при скролле к определенному блоку? Стили должны применяться при скролле до блока и отменяться за его пределами?
- 1 подписчик
- 20 часов назад
- 52 просмотра
1

ответ
JavaScript

+1 ещё

Средний
Как сделать так, чтобы клик по object передавался родителю?
- 1 подписчик
- вчера
- 97 просмотров
2

ответа
CSS

Простой
Почему line-clamp для обрезания строк отображает текст ниже троеточия?
- 1 подписчик
- вчера
- 57 просмотров
1

ответ
HTML

+1 ещё

Простой
Можно ли изменить цвет шрифта снаружи для тега у которого цвет прописан внутри?
- 1 подписчик
- вчера
- 65 просмотров
2

ответа
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- 23 апр.
- 52 просмотра
0

ответов
CSS

Простой
Не работает скролл на фоне блока. Как исправить?
- 1 подписчик
- 23 апр.
- 39 просмотров
1

ответ
HTML

+1 ещё

Простой
Как поместить картинку рядом с текстом?
- 1 подписчик
- 23 апр.
- 85 просмотров
2

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

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Разработать парсер

26 апр. 2024, в 07:47

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

Devops для видео сервиса

26 апр. 2024, в 06:46

1000 руб./в час

Найти ошибку flutter_map

26 апр. 2024, в 05:31

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

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 комментарий

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

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

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

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