Header & Footer

Social Icons

A row of social profile links.

Live demo

See it in action

The markup

Clean, lean code

This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.

<section class="fw-flexbox fw-flex fw-contained fw-collapse">
	<ul class="sc-social social-c48165c6 sc-social--lg">
		<li class="sc-social__item"><a class="sc-social__link" href="#" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-facebook-f" aria-hidden="true"></i><span class="screen-reader-text">Facebook</span></a></li>
		<li class="sc-social__item"><a class="sc-social__link" href="#" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-x-twitter" aria-hidden="true"></i><span class="screen-reader-text">X</span></a></li>
		<li class="sc-social__item"><a class="sc-social__link" href="#" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-instagram" aria-hidden="true"></i><span class="screen-reader-text">Instagram</span></a></li>
		<li class="sc-social__item"><a class="sc-social__link" href="#" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-youtube" aria-hidden="true"></i><span class="screen-reader-text">YouTube</span></a></li>
		<li class="sc-social__item"><a class="sc-social__link" href="#" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-linkedin-in" aria-hidden="true"></i><span class="screen-reader-text">LinkedIn</span></a></li>
		<li class="sc-social__item"><a class="sc-social__link" href="#" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-github" aria-hidden="true"></i><span class="screen-reader-text">GitHub</span></a></li>
	</ul>
</section>

To learn more about the Social Icons shortcode, please check out the online manual here.