Как задать необходимый отступ одного конкретного элемента, если стоит display: flex и justify-content: space between?

Question

[KVLADYKA]

Помогите разобраться, пожалуйста. Пытаюсь подвинуть иконку вправо на нужное мне расстояние. Почему не выходит и что можно попробовать? Спасибо.

Код выглядит так:
скриншот фрагмента кода удален модератором.

В CSS:

.wrapper {
width: 1146px;
margin: 0 auto;
}

.top_header {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 2.4rem 0 1.7rem;
font-size: 1.6rem;

}


.top_header__text{
color: #716C80;


}

.top_header__phone {
color: #716C80;
text-decoration: none;

}
.fa-solid fa-phone{

}

Comments

[Модератор]

См.п.3.8

Answer 1

[Олег Кириллов]

Самые важные куски примера потерлись :) А вообще могу попробовать угадать, что иконка span/i, а отступ вы пытаетесь сделать через margin, который не работает для inline-элементов, замените на padding или же оберните иконку в div.

Comments

[KVLADYKA]

Олег, спасибо!

Я добавила фото. Строку с иконкой я добавила с fontAwesome. Поэтому не знаю, могу ли я ее изменять. Я пробовала через padding, через “second-of-type”, у меня не вышло.

Не могли бы вы ещё раз взглянуть?
Училась сама, доходит туго:)

Answer 2

[Pavstyuk]

Оберните элементы <i> и <a> в один тег <div>, будет меньше проблем, кроме того - это логично. Еще можно иконку <i> поставить внутрь ссылки, тоже не будет проблем лишних, и иконка станет ссылкой.