Если ТЗ нет, то по умолчанию, на ширине макета сайт должен выглядеть как в макете или очень близко к нему.
На всех остальных ширинах от 320 до ∞ сайт должен выглядеть хорошо. Где-то пропорционально, где-то с перестроениями, где-то с ограничением макс ширины. Это зависит не только от верстальщика, но и от самого макета, а также наполнения сайта. Тут нет единого универсального решения.
без абсолюта у тебя положение текста будет зависеть от того, есть иконка или нет. А если она не загрузилась?
Если она не загрузилась, то осталось свободное место. Хоть абсолютом, хоть гридом. (И вообще пропал весь спрайт и сайту стало грустно)
Варианта со сдвигом три: вставлять иконку как img (промолчу), вставлять её как content в псевдоэлемент (а это совсем уж неудобно, потому что плохо регулируются размеры).
imko,
1. Ссылки/кнопки бывают многострочными. При инлайновом псевдо выглядеть это будет странно.
2. Флексы или гриды - хорошо, но имеют НО при наличии внутри текста какого-то тега (span, br). Чтобы гарантированно избежать этого, нужно оборачивать текст в span. <button><span>текст кнопки</span></button>
Итого получаем на чашах весов: абсолют против лишнего тега.
konst34,
1. При подключении шрифта через font-face в font-family пишется только его название.
2. А вот когда вы хотите применить его к какому-то элементу, там уже нужно указывать запасной шрифт из стандартных и/или семейство.
Не поверю, что в первых же строках гугла нет примеров.
p.s. современным браузерам лучше формат woff2, а woff для предыдущего поколения.
В вашем коде нет подключения шрифтов.
1. Шрифты подключаются с помощью правила @font-face
2. Ну а дальше нужно смотреть в консоль, правильные пути и потом по обстоятельствам.
