Social Icons

<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>

Small Icons

<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>

Large Icons

<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>

Share Panel

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: ;

See Available Icons