ستروکیت

چگونه می‌توانیم آیکون‌های شبکه های اجتماعی خود را در وب سایت بگذاریم و آن‌ها را بصورت ثابت در لبه‌های سایت قرار دهیم؟ در این مقاله قصد داریم این کار را با CSS و Html انجام دهیم.

با افزایش استفاده کاربران از شبکه‌های اجتماعی پتانسیل‌های جدیدی برای بازاریابی کسب و کار ها شکل گرفته است اگر شما یک وب سایت دارید باید لینک‌های شبکه‌های اجتماعی خود را در آن قرار دهید تا بتوانید ارتباط با کاربران خود را حفظ کنید و نباید از این امر غافل شوید. باید بتوانید کاربران را به سمت صفحه‌های خود در شبکه‌های اجتماعی هدایت کنید که شما را دنبال کنند تا در جریان محصولات یا خدماتی که دارید یا قرار است ارائه دهید قرار گیرند.

در این مطلب ما با کدهای ساده CSS و ‌‌HTML آیکون‌های شبکه‌های اجتماعی را می‌سازیم و آن‌ها را به صفحات در شبکه‌های اجتماعی لینک می‌دهیم. ویدیوی زیر نشان نشان می‌دهد که نتیجه کار چه خواهد بود.

آیکون‌ها

برای ساخت آیکون‌ها از فونت اوسوم (Font Awesome) استفاده شده است که آموزش استفاده از آن را در لینک زیر می‌توانید مشاهده کنید.

آموزش استفاده از فونت اوسوم

کد‌های HTML

برای ساخت لیست ما از تگ‌های li & ul استفاده کرده‌ایم یک تگ لینک a و span داخل هر li گذاشته ایم. در  داخل span نام آیکون را که بصورت متن راهنما(tooltip) نمایش داده می‌شود قرار می‌دهیم.

<ul id="social-sidebar">
 <li>
 <a class="instagram"><i class="fa fa-instagram"></i><span>اینستاگرام</span></a>
 </li>
 <li>
 <a class="telegram"><i class="fa fa-telegram"></i><span>تلگرام</span></a>
 </li>
 <li>
 <a class="twitter"><i class="fa fa-twitter"></i><span>Tweeter</span></a>
 </li>
 <li>
 <a class="facebook"><i class="fa fa-facebook"></i><span>Facebook</span></a>
 </li>
</ul>

کدهای CSS

#social-sidebar {
 left: 0;
 position: fixed;
 top: 30%;
 padding: 0;
}
#social-sidebar li:first-child a { border-top-right-radius: 5px; }
#social-sidebar li:last-child a { border-bottom-right-radius: 5px; }

#social-sidebar a {
 background: rgba(0, 0, 0, .7);
 color: #fff;
 text-decoration: none;
 display: block;
 height: 50px;
 width: 50px;
 font-size: 24px;
 line-height: 50px;
 position: relative;
 text-align: center;
 cursor: pointer;
}
#social-sidebar a:hover span {
 left: 120%;
 opacity: 1;
}
#social-sidebar a span {
 font: 12px "Open Sans", sans-serif;
 text-transform: uppercase;
 border-radius: 3px;
 line-height: 24px;
 left: -100%;
 margin-top: -16px;
 opacity: 0;
 padding: 4px 8px;
 position: absolute;
 transition: opacity .3s, left .4s;
 top: 50%;
 z-index: -1;
}

#social-sidebar a span:before {
 content: "";
 display: block;
 height: 8px;
 width: 8px;
 left: -4px;
 margin-top: -4px;
 position: absolute;
 top: 50%;
 transform: rotate(45deg);
}

#social-sidebar a:hover,
#social-sidebar a span,
#social-sidebar a span:before {
 background: #333;
}