Когда вы добавляете иконку (например, через псевдоэлемент ::before или ::after) к элементу <i>, и этот <i> элемент находится внутри элемента <a>, могут возникнуть проблемы с отображением этой иконки.
Проблема, с которой вы столкнулись, может быть вызвана тем, что для текстовых элементов (таких как <i>), находящихся внутри элемента <a>, автоматически устанавливается свойство display: inline, в то время как для псевдоэлементов по умолчанию устанавливается display: inline-block.
Чтобы решить эту проблему, можно явно задать для элемента <i> стиль display: inline-block или display: inline-flex. Также можно изменить структуру вашего HTML-кода, например, использовать элемент <span> вместо <i>, так как для <span> по умолчанию устанавливается display: inline.
Пример:
<a href="#"> <span class="icon">Иконка</span> </a>
.icon::before {
content: url('icon.png');
display: inline-block; /* or display: inline-flex; */
}
Таким образом, явное управление свойством display поможет избежать проблем с отображением иконок внутри ссылок.