How Do I ... Create Social Media Follow Icons
Follow Virginia Tech
In order to make Follow Us icons and links, like in the One theme's global footer, use the following code snippet in an HTML component and change the URL links to match your pages. You can also delete sections of it for sites you do not have accounts with. All the CSS and assets to make this work are part of the global template in Ensemble.
Advanced Users: There are other icons available by changing the span class. Those icons can be viewed and their class displayed here: http://fontawesome.io/icons/
<!--copy everything below this -->
<div class="follow-virginia-tech-heading">
<h3>Follow Virginia Tech</h3>
</div>
<div class="follow-virginia-tech-icons">
<!--FACEBOOK ICON --><a href="https://facebook.com/virginiatech" target="_blank"><span class="fab fa-facebook"></span><span class="sr-only">Facebook</span></a>
<!--X ICON --><a href="https://x.com/virginia_tech" target="_blank" aria-label="X"><img style="display:inline-block;width:1em;height:1em;" src="https://www.assets.cms.vt.edu/images/social-media/x-logo-white.svg" aria-hidden="true" focusable="false"><span class="sr-only">X</span></a>
<!--THREADS ICON --><a href="https://www.threads.net/@virginia.tech" target="_blank" aria-label="Threads"><img style="display:inline-block;width:1em;height:1em;" src="https://www.assets.cms.vt.edu/images/threads_logo_white.svg" aria-hidden="true" focusable="false"><span class="sr-only">Threads</span></a>
<!--INSTAGRAM ICON --><a href="https://instagram.com/virginia.tech" target="_blank"><span class="fab fa-instagram"></span><span class="sr-only">Instagram</span></a>
<!--LINKEDIN ICON --><a href="http://www.linkedin.com/edu/school?id=19611&trk" target="_blank"><span class="fab fa-linkedin"></span><span class="sr-only">Linked In</span></a>
<!--PINTEREST ICON --><a href="https://www.pinterest.com/imahokie/" target="_blank"><span class="fab fa-pinterest"></span><span class="sr-only">Pinterest</span></a>
<!--YOUTUBE ICON --><a href="https://www.youtube.com/user/VirginiaTech" target="_blank"><span class="fab fa-youtube"></span><span class="sr-only">YouTube</span></a>
<!--SPOTIFY ICON --><a href="https://open.spotify.com/playlist/2eNcYJzlH6RNWCtRHg3zgy" target="_blank"><span class="fa fab-spotify"></span><span class="sr-only">Spotify</span></a>
</div>
<!--copy everything above this -->
<!--copy everything below this -->
<div class="follow-virginia-tech-heading">
<h3>Follow Virginia Tech</h3>
</div>
<div class="follow-virginia-tech-icons">
<a href="https://facebook.com/virginiatech" target="_blank"><span class="fa fa-facebook"></span><span class="sr-only">Facebook</span></a>
<!--TWITTER ICON --><a href="https://twitter.com/vtnews" target="_blank"><span class="fa fa-twitter"></span><span class="sr-only">Twitter</span></a>
<!--INSTAGRAM ICON --><a href="https://instagram.com/virginia.tech" target="_blank"><span class="fa fa-instagram"></span><span class="sr-only">Instagram</span></a>
<!--LINKEDIN ICON --><a href="http://www.linkedin.com/edu/school?id=19611&trk" target="_blank"><span class="fa fa-linkedin"></span><span class="sr-only">Linked In</span></a>
<!--PINTEREST ICON --><a href="https://www.pinterest.com/imahokie/" target="_blank"><span class="fa fa-pinterest"></span><span class="sr-only">Pinterest</span></a>
<!--YOUTUBE ICON --><a href="https://www.youtube.com/user/VirginiaTech" target="_blank"><span class="fa fa-youtube"></span><span class="sr-only">YouTube</span></a>
</div>
<!--copy everything above this -->
Page updated: 08/04/2023