آموزش ساخت آیکون‌های مینیمال شبکه‌های اجتماعی با افکت hover رنگی

,

در این آموزش، نحوه ایجاد آیکون‌های مینیمال و زیبا برای شبکه‌های اجتماعی با استفاده از CSS و کتابخانه Font Awesome را یاد می‌گیرید. این آیکون‌ها دارای افکت hover هستند که هنگام قرارگیری ماوس روی آن‌ها، به رنگ رسمی هر شبکه اجتماعی تغییر می‌کنند.

مراحل پیاده‌سازی

افزودن فونت Awesome
ابتدا کتابخانه Font Awesome را به پروژه خود اضافه کنید:

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

ساخت ساختار HTML

ساخت ساختار HTML

<div class="social-container">
    <a href="#" class="social-btn youtube"><i class="fab fa-youtube"></i></a>
    <a href="#" class="social-btn twitter"><i class="fab fa-twitter"></i></a>
    <a href="#" class="social-btn instagram"><i class="fab fa-instagram"></i></a>
    <a href="#" class="social-btn linkedin"><i class="fab fa-linkedin-in"></i></a>
    <a href="#" class="social-btn whatsapp"><i class="fab fa-whatsapp"></i></a>
</div>

استایل‌دهی با CSS

.social-container {
    display: flex;
    gap: 15px;
}
.social-btn {
    width: 50px;
    height: 50px;
    border: 1px solid #ddd;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    color: #333;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.social-btn.youtube:hover { color: #FF0000; border-color: #FF0000; }
.social-btn.twitter:hover { color: #1DA1F2; border-color: #1DA1F2; }
.social-btn.instagram:hover { color: #E1306C; border-color: #E1306C; }
.social-btn.linkedin:hover { color: #0A66C2; border-color: #0A66C2; }
.social-btn.whatsapp:hover { color: #25D366; border-color: #25D366; }

کد کامل

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>آیکون‌های شبکه‌های اجتماعی</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f5f5f5;
        }
        .social-container {
            display: flex;
            gap: 15px;
        }
        .social-btn {
            width: 50px;
            height: 50px;
            border: 1px solid #ddd;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: transparent;
            color: #333;
            font-size: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .social-btn.youtube:hover { color: #FF0000; border-color: #FF0000; }
        .social-btn.twitter:hover { color: #1DA1F2; border-color: #1DA1F2; }
        .social-btn.instagram:hover { color: #E1306C; border-color: #E1306C; }
        .social-btn.linkedin:hover { color: #0A66C2; border-color: #0A66C2; }
        .social-btn.whatsapp:hover { color: #25D366; border-color: #25D366; }
    </style>
</head>
<body>
    <div class="social-container">
        <a href="#" class="social-btn youtube"><i class="fab fa-youtube"></i></a>
        <a href="#" class="social-btn twitter"><i class="fab fa-twitter"></i></a>
        <a href="#" class="social-btn instagram"><i class="fab fa-instagram"></i></a>
        <a href="#" class="social-btn linkedin"><i class="fab fa-linkedin-in"></i></a>
        <a href="#" class="social-btn whatsapp"><i class="fab fa-whatsapp"></i></a>
    </div>
</body>
</html>

نظر شما چیست؟

آیا این آموزش برای شما مفید بود؟ اگر سوال یا پیشنهادی دارید، در بخش نظرات با ما در میان بگذارید.

/0 دیدگاه /توسط
0 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *