Social Icons

The Gateway to Social Networks on your Website
More Elements Buy Canvas
  1. Home
  2. Shortcodes
  3. 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

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

Explore more Elements

Dedicated Support
Extensive Documentation
Walkthrough Videos

Create Beautiful & Powerful Websites
Get Canvas for $16 only!

Purchase License