Теперь нас ждут социальные кнопки, которых мы до этого почти не касались.

Чтобы стилизовать эти ссылки как на макете, нам нужно скрыть их текстовое содержимое.

Для этого есть несколько подходов, каждый со своими плюсами и минусами.

Мы используем самый простой подход — зададим нулевой размер шрифта. Плюс здесь один — простота. Минус — возможные проблемы с доступностью.

Конечно, есть альтернативный вариант, который лучше с точки зрения доступности, но сложнее в исполнении. Чтобы использовать этот подход, придётся все тексты обернуть в дополнительные спаны, и к спанам применить стили для доступного сокрытия текстов:

.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
          clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

Почему стили именно такие, можете прочитать в этой англоязычной статье.

Также добавим небольшой отступ справа от блока с кнопками.