<a href="#" class="social-icon h-bg-facebook"> <i class="fa-brands fa-facebook-f"></i> <i class="fa-brands fa-facebook-f"></i> </a>
<a href="#" class="social-icon bg-dark h-bg-facebook"> <i class="fa-brands fa-facebook-f"></i> <i class="fa-brands fa-facebook-f"></i> </a>
<a href="#" class="social-icon bg-light border-transparent h-bg-facebook"> <i class="fa-brands fa-facebook-f"></i> <i class="fa-brands fa-facebook-f"></i> </a>
<a href="#" class="social-icon rounded-circle h-bg-facebook"> <i class="fa-brands fa-facebook-f"></i> <i class="fa-brands fa-facebook-f"></i> </a>
<a href="#" class="social-icon bg-dark rounded-circle h-bg-facebook"> <i class="fa-brands fa-facebook-f"></i> <i class="fa-brands fa-facebook-f"></i> </a>
<a href="#" class="social-icon bg-light rounded-circle h-bg-facebook"> <i class="fa-brands fa-facebook-f"></i> <i class="fa-brands fa-facebook-f"></i> </a>
<a href="#" class="social-icon border-transparent h-bg-facebook"> <i class="fa-brands fa-facebook-f"></i> <i class="fa-brands fa-facebook-f"></i> </a>
<a href="#" class="social-icon border-transparent color-facebook h-bg-facebook"> <i class="fa-brands fa-facebook-f"></i> <i class="fa-brands fa-facebook-f"></i> </a>
<a href="#" class="social-icon text-white bg-facebook"> <i class="fa-brands fa-facebook-f"></i> <i class="fa-brands fa-facebook-f"></i> </a>
<a href="#" class="social-icon border-facebook"> <i class="fa-brands fa-facebook-f color-facebook"></i> <i class="fa-brands fa-facebook-f color-facebook"></i> </a>
<a href="#" class="social-icon border-facebook rounded-circle" style="--cnvs-socialicon-border: 3px"> <i class="fa-brands fa-facebook-f color-facebook"></i> <i class="fa-brands fa-facebook-f color-facebook"></i> </a>
<a href="#" class="social-icon si-small bg-dark h-bg-facebook"> <i class="fa-brands fa-facebook-f"></i> <i class="fa-brands fa-facebook-f"></i> </a>
<a href="#" class="social-icon si-large bg-dark h-bg-facebook"> <i class="fa-brands fa-facebook-f"></i> <i class="fa-brands fa-facebook-f"></i> </a>
Note: You can mix various classes together to make the social icons look according to your needs. It is completely flexible and extendable. --cnvs-socialicon-size: ;--cnvs-socialicon-gap: ;--cnvs-socialicon-fontsize: ;--cnvs-socialicon-border: ;--cnvs-socialicon-border-color: ;--cnvs-socialicon-lineheight: ;--cnvs-socialicon-rounded: ;--cnvs-socialicon-color: ;