Virginia Tech® home

How Do I ... Create Social Media Follow Icons

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 there is a black x-logo.svg; white x-logo-white.svg, and orange x-logo-orange.svg available--><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-orange.svg" aria-hidden="true" focusable="false"><span class="sr-only">X</span></a>

<!--THREADS ICON there is a black threads_logo.svg; white threads_logo_white.svg, and orange threads_logo_orange.svg available --><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_orange.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&amp;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="fab fa-spotify"></span><span class="sr-only">Spotify</span></a>

</div>

<!--copy everything above this -->

<!-- MOSS theme no longer supported as of 08/2018; Switch your site to the One themeĀ -->

Page updated: 08/04/2023