Как поставить иконки перед item?

Question

Как поставить иконки перед item?

Рейтинг: 0Ответов: 1Опубликовано: 01.02.2023

Возникла проблема с иконками их нужно разместить перед заголовком. И не могу никак понять, что я сделал неправильно.

school__item {
  width: 350px;
  margin-right: 75px;
  position: relative;
  
}
.school__item::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
}

.school__item--accommodation::before{
     background-image: url('../images/sun-icon.svg');
}
.school__item--fly::before{
     background-image: url('../images/airplane-icon.svg');
}
.school__item--learn::before{
     bac[![введите сюда описание изображения][1]][1]kground-image: url('../images/surfer-icon.svg');
}

css html

Источник: Stack Overflow на русском

Answer 1

▲ 0

Как-то так

.school__item {
  width: 350px;
  margin-right: 75px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  border: 1px solid #000;
}
.school__title-wrapper {
  width: 90%;
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
}
.school__image {
  width: 30px;
  height: 30px;
  display: block;
  background: #000;
}
.school__title {
  text-transform: uppercase;
  font-size: 18px;
}
.description {
  text-align: justify;
}

<div class="school__item">
  <div class="school__title-wrapper">
    <img class="school__image" src"/" alt="school__image">
    <span class="school__title">Каой-то текст</span>
  </div>
  <div class="description">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов</div>
</div>

Как поставить иконки перед item?

Ответы