Social Icons

Social Icons

Social icons are branded, hover-animated links, one per network. Each .social-icon holds the glyph twice (the second copy slides in on hover). Brand color utilities set the background per network, and shape/size modifiers round or resize the icons.

Structure

• .social-icon - the base social link (contains the icon glyph twice for the hover flip)
• .bg-<network> - fills the icon with a brand color (e.g. .bg-facebook, .bg-google, .bg-instagram)
• .h-bg-<network> - applies the brand color only on hover (e.g. .h-bg-facebook)
• .rounded-circle - Bootstrap utility for circular icons
• .si-small / .si-large - smaller or larger icon sizing
• .si-sticky - fixes a vertical stack of icons to the screen edge (add .si-sticky-right for the right side)

Solid Brand Icon

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

Variants

Hover color fill: use .h-bg-<network> so the brand color appears on hover only. Add .rounded-circle for circular icons.

<a href="#" class="social-icon rounded-circle h-bg-facebook" title="Facebook">
	<i class="fa-brands fa-facebook-f"></i>
	<i class="fa-brands fa-facebook-f"></i>
</a>

Small / large: add .si-small or .si-large to resize.

<a href="#" class="social-icon si-small rounded-circle h-bg-x-twitter">
	<i class="fa-brands fa-x-twitter"></i>
	<i class="fa-brands fa-x-twitter"></i>
</a>

Sticky bar: wrap a set of icons in .si-sticky to pin them to the screen edge.

<div class="si-sticky d-none d-lg-block">
	<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 text-white bg-paypal">
		<i class="fa-brands fa-paypal"></i>
		<i class="fa-brands fa-paypal"></i>
	</a>
</div>

Tips

• Always include the icon glyph twice inside .social-icon; the second one animates in on hover.
• Dozens of brand utilities are available (facebook, google, instagram, dribbble, github, discord, spotify, paypal, and many more) as both .bg-<network> and .h-bg-<network>.
• Add data-animate (e.g. slideInLeft) with staggered data-delay values to animate icons in on scroll.
• Pair .si-sticky with .d-none .d-lg-block so the sticky bar only shows on larger screens.