Как сверстать данную часть header?

Question

[neFran4yz]

п

Comments

[Антон Антон]

А что не получается?

[neFran4yz]

Антон Антон, не понимаю как разместить иконки search, heart, cart , menu , и сделать им такое выделение сзади

[Антон Антон]

neFran4yz, padding + border radius + background-color

[neFran4yz]

Антон Антон, мне нужно объединить heart и cart? проблема в том , что между элементами расстояние разное

[Wispik]

neFran4yz, да объединить их в один блок.
Странно, а я вижу что расстояние одинаковое

[Ankhena]

neFran4yz, можно не объединять, если не хочется (если вы про сердечко с корзинкой).
Используйте флексы+margin или гриды.

Но по логике у вас справа три элемента:
- поиск
- пользовательская менюшка каталога (избранное и корзина)
- кнопка
Эти три компонента опять таки, можно обернуть, а можно и не оборачивать, если не хочется/неудобно.

Пока не понятно какая у вас разметка и что не получилось со стилями.

[neFran4yz]

Ankhena,
итог более-менее что-то получилось, но есть вопрос


есть элемент span, это цифры отвечающие за количество предметов в корзине, у первого span и второго одинаковые классы , поэтому занимают одинаковые положение относительно ссылки, но так как они зеркально расположены одна цифра ставится , вторая уже нет , как решить?
Дать разные классы?

[Ankhena]

neFran4yz,

так как они зеркально расположены

Я не вижу в макете зеркального расположения кружков относительно ссылок.
На глаз так вообще кажется, что они расположены абсолютно одинаково относительно центров ссылок.
Если это не так, то разумеется разные или дополнительные классы.

[Andrew Cossack]

<div class="box">
	<div class="search">
		<!-- icon code -->
	</div>
	<div class="heart-cart">
		<div class="heart">
			<!-- icon code -->
		</div>
		<hr/>
		<div class="cart">
			<!-- icon code -->
		</div>
	</div>
	<div class="menu">
		<!-- icon code -->
	</div>
</div>

а дальше стилями добавляете отступы, цвета и иконки