Как добавить иконки социальных сетей на сайт

Иконки социальных сетей являются важным элементом на современных сайтах, так как они позволяют пользователям делиться контентом, а также облегчают процесс нахождения и подписки на социальные каналы вашего сайта. В этой статье мы рассмотрим, как добавить иконки социальных сетей на сайт.

Станьте веб-разработчиком с нуля за 15 месяцев на курсе онлайн-университета Skypro. Преподаватели — практикующие эксперты из VK, «Альфа-Банка», Skyeng и других крупных компаний. В программе нет лишней теории, зато много практических заданий, а результаты курсовых можно положить в портфолио. Специалисты центра карьеры помогут с резюме, сопроводительными письмами и собеседованиями.

Выбор иконок

Для начала вам потребуются сами иконки. Их можно найти на различных ресурсах, таких как FontAwesome, Flaticon или Iconfinder. Убедитесь, что выбранные иконки имеют подходящий формат (например, SVG или PNG) и размер.

Код HTML

Иконки социальных сетей обычно представляются в виде списка ссылок. Создайте для этого блок с классом social-icons (или любым другим, который будет использоваться в вашем CSS) и добавьте внутрь него ссылки с иконками.

Пример кода:

<div class="social-icons">
  <a href="https://www.facebook.com/yourusername" target="_blank">
    <img src="path/to/facebook-icon.svg" alt="Facebook Icon">
  </a>
  <a href="https://www.twitter.com/yourusername" target="_blank">
    <img src="path/to/twitter-icon.svg" alt="Twitter Icon">
  </a>
  <a href="https://www.instagram.com/yourusername" target="_blank">
    <img src="path/to/instagram-icon.svg" alt="Instagram Icon">
  </a>
</div>

Обратите внимание, что атрибут target="_blank" позволяет открыть ссылку в новой вкладке.

Стилизация иконок

Теперь пришло время стилизовать иконки социальных сетей. Вам потребуется написать CSS-код, который будет управлять размерами, отступами и эффектами при наведении.

Пример кода:

.social-icons {
  display: flex;
  justify-content: center;
}

.social-icons a {
  margin: 0 10px;
}

.social-icons img {
  width: 32px;
  height: 32px;
  transition: transform 0.3s;
}

.social-icons a:hover img {
  transform: scale(1.2);
}

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

😉 Не забудьте адаптировать стили в соответствии с вашим дизайном и размерами иконок!

На курсе Skypro «Веб-разработчик» освоите JavaScript, GitHub, Tilda, Postman, HTML, CSS и другие программы и инструменты, научитесь решать реальные задачи разработчика и работать в команде. Все учебные проекты можно положить в портфолио и устроиться на работу по новой специальности еще в процессе обучения.

Готово!

Теперь иконки социальных сетей должны быть успешно добавлены на ваш сайт. Убедитесь, что все ссылки ведут на правильные аккаунты и проверьте, как они выглядят на разных устройствах.

Приятного кодирования!