Создание контактной информации с иконками Font Awesome

05.08.2024
md2
0 отзывов

Создание контактной информации с иконками Font Awesome

В данной статье мы рассмотрим, как создать секцию контактной информации с использованием иконок Font Awesome. Эти иконки будут представлены горизонтально и будут иметь уникальные цвета и размеры, адаптированные для компьютеров и телефонов.

Шаги создания

Подключение библиотеки Font Awesome
Создание HTML-разметки
Добавление CSS-стилей

1. Подключение библиотеки Font Awesome

Для начала нам нужно подключить библиотеку Font Awesome к нашему HTML-документу. Это позволит нам использовать иконки в нашем проекте. Используем следующий код для подключения:

html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

2. Создание HTML-разметки

Создадим HTML-структуру для отображения иконок контактной информации. Мы будем использовать тег <a> для создания ссылок на различные контактные данные, а иконки Font Awesome добавим с помощью тегов <i>.

html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Information</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        .contact-info {
            display: flex;
            gap: 20px; /* Расстояние между элементами */
            align-items: center; /* Выравнивание по центру */
        }
        .contact-info a {
            text-decoration: none; /* Убираем подчеркивание */
            display: flex;
            align-items: center; /* Выравнивание иконок по центру */
        }
        .contact-info a:hover {
            text-decoration: underline; /* Подчеркивание при наведении */
        }
        .fa-telegram { color: #0088cc; } /* Цвет Telegram */
        .fa-whatsapp { color: #25d366; } /* Цвет WhatsApp */
        .fa-globe { color: #ff5722; } /* Цвет Веб-сайт */
        .fa-phone { color: #4caf50; } /* Цвет Телефон */
        .fa-envelope { color: #d32f2f; } /* Цвет Почта */

        /* Размеры для компьютера */
        @media (min-width: 768px) {
            .contact-info a {
                font-size: 24px; /* Размер иконок для компьютера */
            }
        }
        /* Размеры для телефона */
        @media (max-width: 767px) {
            .contact-info a {
                font-size: 18px; /* Размер иконок для телефона */
            }
        }
    </style>
</head>
<body>
    <div class="contact-info">
        <a href="https://t.me/md2_ru" target="_blank" title="Telegram"><i class="fab fa-telegram"></i></a>
        <a href="https://wa.me/+79999193246" target="_blank" title="WhatsApp"><i class="fab fa-whatsapp"></i></a>
        <a href="https://velq.ru" target="_blank" title="Веб-сайт Доска объявлений VelQ.ru"><i class="fas fa-globe"></i></a>
        <a href="tel:+7(999)919-32-46" title="Телефон"><i class="fas fa-phone"></i></a>
        <a href="mailto:your_email@example.com" title="Почта"><i class="fas fa-envelope"></i></a>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/js/all.min.js"></script>
</body>
</html>

3. Добавление CSS-стилей

Теперь добавим CSS-стили для настройки внешнего вида иконок. Мы будем использовать Flexbox для горизонтального выравнивания иконок, зададим уникальные цвета для каждой иконки, а также настроим разные размеры для компьютеров и телефонов с помощью медиа-запросов.

css
.contact-info {
    display: flex;
    gap: 20px; /* Расстояние между элементами */
    align-items: center; /* Выравнивание по центру */
}
.contact-info a {
    text-decoration: none; /* Убираем подчеркивание */
    display: flex;
    align-items: center; /* Выравнивание иконок по центру */
}
.contact-info a:hover {
    text-decoration: underline; /* Подчеркивание при наведении */
}
.fa-telegram { color: #0088cc; } /* Цвет Telegram */
.fa-whatsapp { color: #25d366; } /* Цвет WhatsApp */
.fa-globe { color: #ff5722; } /* Цвет Веб-сайт */
.fa-phone { color: #4caf50; } /* Цвет Телефон */
.fa-envelope { color: #d32f2f; } /* Цвет Почта */

/* Размеры для компьютера */
@media (min-width: 768px) {
    .contact-info a {
        font-size: 24px; /* Размер иконок для компьютера */
    }
}
/* Размеры для телефона */
@media (max-width: 767px) {
    .contact-info a {
        font-size: 18px; /* Размер иконок для телефона */
    }
}

Заключение

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

Отзывы (0)

Теги: HTML, CSS, Font Awesome, контактная информация, адаптивный дизайн, иконки

Создание контактной информации с иконками Font Awesome