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>
<div class="fw-container">
<div class="fw-row">
<div class="fw-col-12">
<ul class="sc-social social-26540b63 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>
</div>
</div>
</div>
</section>To learn more about the Social Icons shortcode, please check out the online manual here.
Free & open source
Build with this element, free.
Install the framework and the Bootstrap 5 theme, then drag this element into any page.