
Social buttons
Display links to your social network accounts with these icon buttons.
Cartzilla component
Type: solid
<!-- Facebook -->
<a href="#" class="btn-social bs-facebook">
<i class="ci-facebook"></i>
</a>
<!-- Twitter -->
<a href="#" class="btn-social bs-twitter">
<i class="ci-twitter"></i>
</a>
<!-- Instagram -->
<a href="#" class="btn-social bs-instagram">
<i class="ci-instagram"></i>
</a>
<!-- Google -->
<a href="#" class="btn-social bs-google">
<i class="ci-google"></i>
</a>
<!-- LinkedIn -->
<a href="#" class="btn-social bs-linkedin">
<i class="ci-linkedin"></i>
</a>
<!-- Pinterest -->
<a href="#" class="btn-social bs-pinterest">
<i class="ci-pinterest"></i>
</a>
<!-- Tumblr -->
<a href="#" class="btn-social bs-tumblr">
<i class="ci-tumblr"></i>
</a>
<!-- Behance -->
<a href="#" class="btn-social bs-behance">
<i class="ci-behance"></i>
</a>
<!-- Dribbble -->
<a href="#" class="btn-social bs-dribbble">
<i class="ci-dribbble"></i>
</a>
<!-- VKontakte -->
<a href="#" class="btn-social bs-vk">
<i class="ci-vk"></i>
</a>
<!-- Odnoklassniki -->
<a href="#" class="btn-social bs-odnoklassniki">
<i class="ci-odnoklassniki"></i>
</a>
<!-- Skype -->
<a href="#" class="btn-social bs-skype">
<i class="ci-skype"></i>
</a>
<!-- Hangouts -->
<a href="#" class="btn-social bs-hangouts">
<i class="ci-hangouts"></i>
</a>
<!-- Messenger -->
<a href="#" class="btn-social bs-messenger">
<i class="ci-messenger"></i>
</a>
<!-- Viber -->
<a href="#" class="btn-social bs-viber">
<i class="ci-viber"></i>
</a>
<!-- Telegram -->
<a href="#" class="btn-social bs-telegram">
<i class="ci-telegram"></i>
</a>
<!-- YouTube -->
<a href="#" class="btn-social bs-youtube">
<i class="ci-youtube"></i>
</a>
<!-- YouTube outline -->
<a href="#" class="btn-social bs-youtube">
<i class="ci-youtube-outline"></i>
</a>
<!-- Vimeo -->
<a href="#" class="btn-social bs-vimeo">
<i class="ci-vimeo"></i>
</a>
<!-- WeChat -->
<a href="#" class="btn-social bs-wechat">
<i class="ci-wechat"></i>
</a>
<!-- Discord -->
<a href="#" class="btn-social bs-discord">
<i class="ci-discord"></i>
</a>
<!-- TikTok -->
<a href="#" class="btn-social bs-tiktok">
<i class="ci-tiktok"></i>
</a>
<!-- WhatsApp -->
<a href="#" class="btn-social bs-whatsapp">
<i class="ci-whatsapp"></i>
</a>
Type: outline
<!-- Facebook -->
<a href="#" class="btn-social bs-outline bs-facebook">
<i class="ci-facebook"></i>
</a>
<!-- Twitter -->
<a href="#" class="btn-social bs-outline bs-twitter">
<i class="ci-twitter"></i>
</a>
<!-- Instagram -->
<a href="#" class="btn-social bs-outline bs-instagram">
<i class="ci-instagram"></i>
</a>
<!-- Google -->
<a href="#" class="btn-social bs-outline bs-google">
<i class="ci-google"></i>
</a>
<!-- LinkedIn -->
<a href="#" class="btn-social bs-outline bs-linkedin">
<i class="ci-linkedin"></i>
</a>
<!-- Pinterest -->
<a href="#" class="btn-social bs-outline bs-pinterest">
<i class="ci-pinterest"></i>
</a>
<!-- Tumblr -->
<a href="#" class="btn-social bs-outline bs-tumblr">
<i class="ci-tumblr"></i>
</a>
<!-- Behance -->
<a href="#" class="btn-social bs-outline bs-behance">
<i class="ci-behance"></i>
</a>
<!-- Dribbble -->
<a href="#" class="btn-social bs-outline bs-dribbble">
<i class="ci-dribbble"></i>
</a>
<!-- VKontakte -->
<a href="#" class="btn-social bs-outline bs-vk">
<i class="ci-vk"></i>
</a>
<!-- Odnoklassniki -->
<a href="#" class="btn-social bs-outline bs-odnoklassniki">
<i class="ci-odnoklassniki"></i>
</a>
<!-- Skype -->
<a href="#" class="btn-social bs-outline bs-skype">
<i class="ci-skype"></i>
</a>
<!-- Hangouts -->
<a href="#" class="btn-social bs-outline bs-hangouts">
<i class="ci-hangouts"></i>
</a>
<!-- Messenger -->
<a href="#" class="btn-social bs-outline bs-messenger">
<i class="ci-messenger"></i>
</a>
<!-- Viber -->
<a href="#" class="btn-social bs-outline bs-viber">
<i class="ci-viber"></i>
</a>
<!-- Telegram -->
<a href="#" class="btn-social bs-outline bs-telegram">
<i class="ci-telegram"></i>
</a>
<!-- YouTube -->
<a href="#" class="btn-social bs-outline bs-youtube">
<i class="ci-youtube"></i>
</a>
<!-- YouTube outline -->
<a href="#" class="btn-social bs-outline bs-youtube">
<i class="ci-youtube-outline"></i>
</a>
<!-- Vimeo -->
<a href="#" class="btn-social bs-outline bs-vimeo">
<i class="ci-vimeo"></i>
</a>
<!-- WeChat -->
<a href="#" class="btn-social bs-outline bs-wechat">
<i class="ci-wechat"></i>
</a>
<!-- Discord -->
<a href="#" class="btn-social bs-outline bs-discord">
<i class="ci-discord"></i>
</a>
<!-- TikTok -->
<a href="#" class="btn-social bs-outline bs-tiktok">
<i class="ci-tiktok"></i>
</a>
<!-- WhatsApp -->
<a href="#" class="btn-social bs-outline bs-whatsapp">
<i class="ci-whatsapp"></i>
</a>
Round shape
Sizing
<!-- Solid large button -->
<a href="#" class="btn-social bs-dribbble bs-lg">
<i class="ci-dribbble"></i>
</a>
<!-- Solid medium button -->
<a href="#" class="btn-social bs-dribbble">
<i class="ci-dribbble"></i>
</a>
<!-- Solid small button -->
<a href="#" class="btn-social bs-dribbble bs-sm">
<i class="ci-dribbble"></i>
</a>
<!-- Outline large button -->
<a href="#" class="btn-social bs-instagram bs-outline bs-lg">
<i class="ci-instagram"></i>
</a>
<!-- Outline medium button -->
<a href="#" class="btn-social bs-instagram bs-outline">
<i class="ci-instagram"></i>
</a>
<!-- Outline small button -->
<a href="#" class="btn-social bs-instagram bs-outline bs-sm">
<i class="ci-instagram"></i>
</a>
<!-- Round solid large button -->
<a href="#" class="btn-social bs-skype rounded-circle bs-lg">
<i class="ci-skype"></i>
</a>
<!-- Round solid medium button -->
<a href="#" class="btn-social bs-skype rounded-circle">
<i class="ci-skype"></i>
</a>
<!-- Round solid small button -->
<a href="#" class="btn-social bs-skype rounded-circle bs-sm">
<i class="ci-skype"></i>
</a>
<!-- Round outline large button -->
<a href="#" class="btn-social bs-pinterest rounded-circle bs-outline bs-lg">
<i class="ci-pinterest"></i>
</a>
<!-- Round outline medium button -->
<a href="#" class="btn-social bs-pinterest rounded-circle bs-outline">
<i class="ci-pinterest"></i>
</a>
<!-- Round outline small button -->
<a href="#" class="btn-social bs-pinterest rounded-circle bs-outline bs-sm">
<i class="ci-pinterest"></i>
</a>