@Ivanushka255

Иконка состоит из двух элементов, что делать?

Возможно, я не совсем точно выразился, поэтому прилагаю внизу фото как это выглядит.

Вот вся иконка:

5f3591e372e8e701284141.png

Вот ее нижняя часть:

5f359218b046e172548487.png

Вот ее верхняя часть:

5f35922f8f080641724802.png

Как это решать? Выгружать по отдельности, а потом располагать position первую и вторую части, накладывая одну на другую z-index? Не видел что такое бывает.
  • Вопрос задан
  • 77 просмотров
Решения вопроса 2
sniggering_deus
@sniggering_deus Куратор тега CSS
Dance Gavin Dance - Prisoner
Если при наведении/hover нужна анимация иконки, смена цвета или что-то ещё, тогда вкладываем иконку в дополнительный блок.

Оборачиваем иконку в родительский блок:

<figure class="element">
<!-- Сюда кладете SVG иконку -->
</figure>


Далее накладываются нужные стили, например:

.element {
width: 80px;
height: 80px;
border-radius: 5px;
background: coral;
display: inline-flex;
justify-content: center;
align-items: center;
}

.svg {
width: 50px;
height: 50px;
}

/* и так далее */


Или если иконка будет статичной, можно объединить слои в графическом редакторе и использовать как цельный элемент, например в теге <img> или как background для какого-нибудь </span> который будет выполнять роль иконки. Но этот вариант так себе.

Ещё один вариант сделать бекграундом псевдоэлемента, то есть например так:

<span class="element"></span>

.element {
width: 80px;
height: 80px;
border-radius: 5px;
background: #fff;
display: inline-flex;
justify-content: center;
align-items: center;
}

.element::before {
content: "";
width: 30px;
height: 30px;
background: url("link") no-repeat center center / cover;
}


Ну и самый "простой" способ - это использовать "всю мощь" свойства background чтобы разместить всё в одном элементе без лишнего кода и так далее:

<span class="element"></span>

.element {
  display: inline-flex;
  width: 80px;
  height: 80px;
  border-radius: 5px;
  background-color: #fff;
  background-image: url("link");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 50px;
}
Ответ написан
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Нет, конечно.
Это делается одним элементом.
Фон и скругления задаются в CSS

.icon {
display: block; /*или другой по обстоятельствам*/
width: 30px;
height: 30px;
border-radius: 10px;
background-color: blue; /*цвет фона*/
background-image: url(путь к картинке);
background-position: center;
background-repeat: no-repeat;
background-size: нужный-размер;
}


Если картинке нужно менять цвет при разных состояниях, то её вставляют как инлайн SVG (желательно спрайтом).
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@McBernar
Да просто оберните в div. Фон и уголки иконки — это стили слоя, а внутри одна белая свгшка.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы