دکمه های شبکه اجتماعی

<!-- Airbnb -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-airbnb"></i>
</a>

<!-- Behance -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-behance"></i>
</a>

<!-- Discord -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-discord"></i>
</a>

<!-- Dribbble -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-dribbble"></i>
</a>

<!-- Dropbox -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-dropbox"></i>
</a>

<!-- Facebook square -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-facebook-square"></i>
</a>

<!-- Facebook -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-facebook"></i>
</a>

<!-- Foursquare -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-foursquare"></i>
</a>

<!-- GitHub -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-github"></i>
</a>

<!-- Google Drive -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-google-drive"></i>
</a>

<!-- Google Play -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-google-play"></i>
</a>

<!-- Google -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-google"></i>
</a>

<!-- Hangouts -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-hangouts"></i>
</a>

<!-- Instagram -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-instagram"></i>
</a>

<!-- LinkedIn -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-linkedin"></i>
</a>

<!-- Medium -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-medium"></i>
</a>

<!-- Messenger -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-messenger"></i>
</a>

<!-- Odnoklassniki -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-odnoklassniki"></i>
</a>

<!-- PayPal -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-paypal"></i>
</a>

<!-- Pinterest -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-pinterest"></i>
</a>

<!-- RSS -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-rss"></i>
</a>

<!-- Skype -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-skype"></i>
</a>

<!-- Slack -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-slack"></i>
</a>

<!-- Snapchat -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-snapchat"></i>
</a>

<!-- SoundCloud -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-soundcloud"></i>
</a>

<!-- Telegram circle -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-telegram-circle"></i>
</a>

<!-- Telegram -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-telegram"></i>
</a>

<!-- TikTok -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-tiktok"></i>
</a>

<!-- Tumblr -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-tumblr"></i>
</a>

<!-- Twitch -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-twitch"></i>
</a>

<!-- Twitter -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-twitter"></i>
</a>

<!-- Viber -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-viber"></i>
</a>

<!-- Vimeo -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-vimeo"></i>
</a>

<!-- VK -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-vk"></i>
</a>

<!-- WeChat -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-wechat"></i>
</a>

<!-- WhatsApp -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-whatsapp"></i>
</a>

<!-- XING -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-xing"></i>
</a>

<!-- YouTube -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-youtube"></i>
</a>

<!-- Email -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-email"></i>
</a>

<!-- Phone -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-phone"></i>
</a>

// Airbnb
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-airbnb

// Behance
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-behance

// Discord
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-discord

// Dribbble
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-dribbble

// Dropbox
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-dropbox

// Facebook square
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-facebook-square

// Facebook
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-facebook

// Foursquare
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-foursquare

// GitHub
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-github

// Google Drive
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-google-drive

// Google Play
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-google-play

// Google
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-google

// Hangouts
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-hangouts

// Instagram
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-instagram

// LinkedIn
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-linkedin

// Medium
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-medium

// Messenger
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-messenger

// Odnoklassniki
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-odnoklassniki

// PayPal
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-paypal

// Pinterest
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-pinterest

// RSS
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-rss

// Skype
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-skype

// Slack
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-slack

// Snapchat
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-snapchat

// SoundCloud
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-soundcloud

// Telegram circle
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-telegram-circle

// Telegram
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-telegram

// TikTok
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-tiktok

// Tumblr
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-tumblr

// Twitch
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-twitch

// Twitter
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-twitter

// Viber
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-viber

// Vimeo
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-vimeo

// VK
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-vk

// WeChat
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-wechat

// WhatsApp
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-whatsapp

// XING
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-xing

// YouTube
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-youtube

// Email
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-mail

// Phone
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-phone

<!-- Airbnb -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-airbnb"></i>
</a>

<!-- Behance -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-behance"></i>
</a>

<!-- Discord -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-discord"></i>
</a>

<!-- Dribbble -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-dribbble"></i>
</a>

<!-- Dropbox -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-dropbox"></i>
</a>

<!-- Facebook square -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-facebook-square"></i>
</a>

<!-- Facebook -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-facebook"></i>
</a>

<!-- Foursquare -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-foursquare"></i>
</a>

<!-- GitHub -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-github"></i>
</a>

<!-- Google Drive -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-google-drive"></i>
</a>

<!-- Google Play -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-google-play"></i>
</a>

<!-- Google -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-google"></i>
</a>

<!-- Hangouts -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-hangouts"></i>
</a>

<!-- Instagram -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-instagram"></i>
</a>

<!-- LinkedIn -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-linkedin"></i>
</a>

<!-- Medium -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-medium"></i>
</a>

<!-- Messenger -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-messenger"></i>
</a>

<!-- Odnoklassniki -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-odnoklassniki"></i>
</a>

<!-- PayPal -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-paypal"></i>
</a>

<!-- Pinterest -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-pinterest"></i>
</a>

<!-- RSS -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-rss"></i>
</a>

<!-- Skype -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-skype"></i>
</a>

<!-- Slack -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-slack"></i>
</a>

<!-- Snapchat -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-snapchat"></i>
</a>

<!-- SoundCloud -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-soundcloud"></i>
</a>

<!-- Telegram circle -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-telegram-circle"></i>
</a>

<!-- Telegram -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-telegram"></i>
</a>

<!-- TikTok -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-tiktok"></i>
</a>

<!-- Tumblr -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-tumblr"></i>
</a>

<!-- Twitch -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-twitch"></i>
</a>

<!-- Twitter -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-twitter"></i>
</a>

<!-- Viber -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-viber"></i>
</a>

<!-- Vimeo -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-vimeo"></i>
</a>

<!-- VK -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-vk"></i>
</a>

<!-- WeChat -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-wechat"></i>
</a>

<!-- WhatsApp -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-whatsapp"></i>
</a>

<!-- XING -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-xing"></i>
</a>

<!-- YouTube -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-youtube"></i>
</a>

<!-- Email -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-email"></i>
</a>

<!-- Phone -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-phone"></i>
</a>

// Airbnb
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-airbnb

// Behance
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-behance

// Discord
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-discord

// Dribbble
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-dribbble

// Dropbox
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-dropbox

// Facebook square
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-facebook-square

// Facebook
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-facebook

// Foursquare
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-foursquare

// GitHub
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-github

// Google Drive
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-google-drive

// Google Play
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-google-play

// Google
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-google

// Hangouts
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-hangouts

// Instagram
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-instagram

// LinkedIn
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-linkedin

// Medium
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-medium

// Messenger
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-messenger

// Odnoklassniki
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-odnoklassniki

// PayPal
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-paypal

// Pinterest
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-pinterest

// RSS
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-rss

// Skype
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-skype

// Slack
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-slack

// Snapchat
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-snapchat

// SoundCloud
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-soundcloud

// Telegram circle
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-telegram-circle

// Telegram
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-telegram

// TikTok
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-tiktok

// Tumblr
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-tumblr

// Twitch
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-twitch

// Twitter
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-twitter

// Viber
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-viber

// Vimeo
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-vimeo

// VK
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-vk

// WeChat
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-wechat

// WhatsApp
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-whatsapp

// XING
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-xing

// YouTube
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-youtube

// Email
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-mail

// Phone
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-phone

<!-- Airbnb -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-airbnb"></i>
</a>

<!-- Behance -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-behance"></i>
</a>

<!-- Discord -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-discord"></i>
</a>

<!-- Dribbble -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-dribbble"></i>
</a>

<!-- Dropbox -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-dropbox"></i>
</a>

<!-- Facebook square -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-facebook-square"></i>
</a>

<!-- Facebook -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-facebook"></i>
</a>

<!-- Foursquare -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-foursquare"></i>
</a>

<!-- GitHub -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-github"></i>
</a>

<!-- Google Drive -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-google-drive"></i>
</a>

<!-- Google Play -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-google-play"></i>
</a>

<!-- Google -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-google"></i>
</a>

<!-- Hangouts -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-hangouts"></i>
</a>

<!-- Instagram -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-instagram"></i>
</a>

<!-- LinkedIn -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-linkedin"></i>
</a>

<!-- Medium -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-medium"></i>
</a>

<!-- Messenger -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-messenger"></i>
</a>

<!-- Odnoklassniki -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-odnoklassniki"></i>
</a>

<!-- PayPal -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-paypal"></i>
</a>

<!-- Pinterest -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-pinterest"></i>
</a>

<!-- RSS -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-rss"></i>
</a>

<!-- Skype -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-skype"></i>
</a>

<!-- Slack -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-slack"></i>
</a>

<!-- Snapchat -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-snapchat"></i>
</a>

<!-- SoundCloud -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-soundcloud"></i>
</a>

<!-- Telegram circle -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-telegram-circle"></i>
</a>

<!-- Telegram -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-telegram"></i>
</a>

<!-- TikTok -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-tiktok"></i>
</a>

<!-- Tumblr -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-tumblr"></i>
</a>

<!-- Twitch -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-twitch"></i>
</a>

<!-- Twitter -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-twitter"></i>
</a>

<!-- Viber -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-viber"></i>
</a>

<!-- Vimeo -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-vimeo"></i>
</a>

<!-- VK -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-vk"></i>
</a>

<!-- WeChat -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-wechat"></i>
</a>

<!-- WhatsApp -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-whatsapp"></i>
</a>

<!-- XING -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-xing"></i>
</a>

<!-- YouTube -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-youtube"></i>
</a>

<!-- Email -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-email"></i>
</a>

<!-- Phone -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-phone"></i>
</a>

// Airbnb
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-airbnb

// Behance
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-behance

// Discord
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-discord

// Dribbble
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-dribbble

// Dropbox
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-dropbox

// Facebook square
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-facebook-square

// Facebook
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-facebook

// Foursquare
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-foursquare

// GitHub
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-github

// Google Drive
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-google-drive

// Google Play
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-google-play

// Google
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-google

// Hangouts
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-hangouts

// Instagram
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-instagram

// LinkedIn
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-linkedin

// Medium
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-medium

// Messenger
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-messenger

// Odnoklassniki
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-odnoklassniki

// PayPal
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-paypal

// Pinterest
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-pinterest

// RSS
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-rss

// Skype
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-skype

// Slack
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-slack

// Snapchat
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-snapchat

// SoundCloud
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-soundcloud

// Telegram circle
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-telegram-circle

// Telegram
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-telegram

// TikTok
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-tiktok

// Tumblr
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-tumblr

// Twitch
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-twitch

// Twitter
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-twitter

// Viber
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-viber

// Vimeo
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-vimeo

// VK
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-vk

// WeChat
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-wechat

// WhatsApp
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-whatsapp

// XING
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-xing

// YouTube
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-youtube

// Email
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-mail

// Phone
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-phone

<!-- Airbnb -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-airbnb"></i>
</a>

<!-- Behance -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-behance"></i>
</a>

<!-- Discord -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-discord"></i>
</a>

<!-- Dribbble -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-dribbble"></i>
</a>

<!-- Dropbox -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-dropbox"></i>
</a>

<!-- Facebook square -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-facebook-square"></i>
</a>

<!-- Facebook -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-facebook"></i>
</a>

<!-- Foursquare -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-foursquare"></i>
</a>

<!-- GitHub -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-github"></i>
</a>

<!-- Google Drive -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-google-drive"></i>
</a>

<!-- Google Play -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-google-play"></i>
</a>

<!-- Google -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-google"></i>
</a>

<!-- Hangouts -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-hangouts"></i>
</a>

<!-- Instagram -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-instagram"></i>
</a>

<!-- LinkedIn -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-linkedin"></i>
</a>

<!-- Medium -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-medium"></i>
</a>

<!-- Messenger -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-messenger"></i>
</a>

<!-- Odnoklassniki -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-odnoklassniki"></i>
</a>

<!-- PayPal -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-paypal"></i>
</a>

<!-- Pinterest -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-pinterest"></i>
</a>

<!-- RSS -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-rss"></i>
</a>

<!-- Skype -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-skype"></i>
</a>

<!-- Slack -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-slack"></i>
</a>

<!-- Snapchat -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-snapchat"></i>
</a>

<!-- SoundCloud -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-soundcloud"></i>
</a>

<!-- Telegram circle -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-telegram-circle"></i>
</a>

<!-- Telegram -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-telegram"></i>
</a>

<!-- TikTok -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-tiktok"></i>
</a>

<!-- Tumblr -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-tumblr"></i>
</a>

<!-- Twitch -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-twitch"></i>
</a>

<!-- Twitter -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-twitter"></i>
</a>

<!-- Viber -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-viber"></i>
</a>

<!-- Vimeo -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-vimeo"></i>
</a>

<!-- VK -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-vk"></i>
</a>

<!-- WeChat -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-wechat"></i>
</a>

<!-- WhatsApp -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-whatsapp"></i>
</a>

<!-- XING -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-xing"></i>
</a>

<!-- YouTube -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-youtube"></i>
</a>

<!-- Email -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-email"></i>
</a>

<!-- Phone -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-phone"></i>
</a>

// Airbnb
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-airbnb

// Behance
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-behance

// Discord
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-discord

// Dribbble
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-dribbble

// Dropbox
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-dropbox

// Facebook square
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-facebook-square

// Facebook
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-facebook

// Foursquare
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-foursquare

// GitHub
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-github

// Google Drive
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-google-drive

// Google Play
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-google-play

// Google
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-google

// Hangouts
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-hangouts

// Instagram
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-instagram

// LinkedIn
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-linkedin

// Medium
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-medium

// Messenger
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-messenger

// Odnoklassniki
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-odnoklassniki

// PayPal
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-paypal

// Pinterest
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-pinterest

// RSS
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-rss

// Skype
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-skype

// Slack
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-slack

// Snapchat
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-snapchat

// SoundCloud
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-soundcloud

// Telegram circle
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-telegram-circle

// Telegram
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-telegram

// TikTok
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-tiktok

// Tumblr
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-tumblr

// Twitch
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-twitch

// Twitter
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-twitter

// Viber
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-viber

// Vimeo
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-vimeo

// VK
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-vk

// WeChat
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-wechat

// WhatsApp
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-whatsapp

// XING
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-xing

// YouTube
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-youtube

// Email
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-mail

// Phone
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-phone

<!-- Round solid icon button -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm rounded-circle">
  <i class="fi-instagram"></i>
</a>

<!-- Round translucent icon button -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs rounded-circle">
  <i class="fi-instagram"></i>
</a>

<!-- Round border icon button -->
<a href="#" class="btn btn-icon btn-light border btn-xs rounded-circle">
  <i class="fi-instagram"></i>
</a>

// Round solid icon button
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm.rounded-circle
  i.fi-instagram

// Round translucent icon button
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs.rounded-circle
  i.fi-instagram

// Round border icon button
a(href="#").btn.btn-icon.btn-light.border.btn-xs.rounded-circle
  i.fi-instagram

<!-- Extra small basic icon button -->
<a href="#" class="btn btn-link py-1 px-2">
  <i class="fi-dribbble"></i>
</a>

<!-- Small basic icon button -->
<a href="#" class="btn btn-link fs-lg py-1 px-2">
  <i class="fi-dribbble"></i>
</a>

<!-- Normal basic icon button -->
<a href="#" class="btn btn-link fs-4 py-1 px-2">
  <i class="fi-dribbble"></i>
</a>

<!-- Large basic icon button -->
<a href="#" class="btn btn-link fs-3 py-1 px-2">
  <i class="fi-dribbble"></i>
</a>

<!-- Extra small solid icon button -->
<a href="#" class="btn btn-icon btn-light-primary btn-xxs shadow-sm">
  <i class="fi-twitter"></i>
</a>

<!-- Small solid icon button -->
<a href="#" class="btn btn-icon btn-light-primary btn-xs shadow-sm">
  <i class="fi-twitter"></i>
</a>

<!-- Normal solid icon button -->
<a href="#" class="btn btn-icon btn-light-primary btn-sm shadow-sm">
  <i class="fi-twitter"></i>
</a>

<!-- Large solid icon button -->
<a href="#" class="btn btn-icon btn-light-primary shadow-sm">
  <i class="fi-twitter"></i>
</a>

<!-- Extra small translucent icon button -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xxs">
  <i class="fi-skype"></i>
</a>

<!-- Small translucent icon button -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-xs">
  <i class="fi-skype"></i>
</a>

<!-- Normal translucent icon button -->
<a href="#" class="btn btn-icon btn-translucent-primary btn-sm">
  <i class="fi-skype"></i>
</a>

<!-- Large translucent icon button -->
<a href="#" class="btn btn-icon btn-translucent-primary">
  <i class="fi-skype"></i>
</a>

<!-- Extra small border icon button -->
<a href="#" class="btn btn-icon btn-light border btn-xxs">
  <i class="fi-google"></i>
</a>

<!-- Small border icon button -->
<a href="#" class="btn btn-icon btn-light border btn-xs">
  <i class="fi-google"></i>
</a>

<!-- Normal border icon button -->
<a href="#" class="btn btn-icon btn-light border btn-sm">
  <i class="fi-google"></i>
</a>

<!-- Large border icon button -->
<a href="#" class="btn btn-icon btn-light border">
  <i class="fi-google"></i>
</a>

// Extra small basic icon button
a(href="#").btn.btn-link.py-1.px-2
  i.fi-dribbble

// Small basic icon button
a(href="#").btn.btn-link.fs-lg.py-1.px-2
  i.fi-dribbble

// Normal basic icon button
a(href="#").btn.btn-link.fs-4.py-1.px-2
  i.fi-dribbble

// Large basic icon button
a(href="#").btn.btn-link.fs-3.py-1.px-2
  i.fi-dribbble

// Extra small solid icon button
a(href="#").btn.btn-icon.btn-light-primary.btn-xxs.shadow-sm
  i.fi-twitter

// Small solid icon button
a(href="#").btn.btn-icon.btn-light-primary.btn-xs.shadow-sm
  i.fi-twitter

// Normal solid icon button
a(href="#").btn.btn-icon.btn-light-primary.btn-sm.shadow-sm
  i.fi-twitter

// Large solid icon button
a(href="#").btn.btn-icon.btn-light-primary.shadow-sm
  i.fi-twitter

// Extra small translucent icon button
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xxs
  i.fi-skype

// Small translucent icon button
a(href="#").btn.btn-icon.btn-translucent-primary.btn-xs
  i.fi-skype

// Normal translucent icon button
a(href="#").btn.btn-icon.btn-translucent-primary.btn-sm
  i.fi-skype

// Large translucent icon button
a(href="#").btn.btn-icon.btn-translucent-primary
  i.fi-skype

// Extra small border icon button
a(href="#").btn.btn-icon.btn-light.border.btn-xxs
  i.fi-google

// Small border icon button
a(href="#").btn.btn-icon.btn-light.border.btn-xs
  i.fi-google

// Normal border icon button
a(href="#").btn.btn-icon.btn-light.border.btn-sm
  i.fi-google

// Large border icon button
a(href="#").btn.btn-icon.btn-light.border
  i.fi-google

<!-- Basic light icon button -->
<a href="#" class="btn btn-link btn-light fs-lg py-1 px-2">
  <i class="fi-facebook"></i>
</a>

<!-- Translucent light icon button -->
<a href="#" class="btn btn-icon btn-translucent-light btn-xs">
  <i class="fi-facebook"></i>
</a>

<!-- Border light icon button -->
<a href="#" class="btn btn-icon btn-outline-light border-light btn-xs">
  <i class="fi-facebook"></i>
</a>

// Basic light icon button
a(href="#").btn.btn-link.btn-light.fs-lg.py-1.px-2
  i.fi-facebook

// Translucent light icon button
a(href="#").btn.btn-icon.btn-translucent-light.btn-xs
  i.fi-facebook

// Border light icon button
a(href="#").btn.btn-icon.btn-outline-light.border-light.btn-xs
  i.fi-facebook