Social Media Links: HTML + CSS

Twitch Website Builder > Social Media Links: HTML + CSS

In this lesson, you will learn how to customize and style your own social media links using HTML and CSS. In our Twitch Website Builder Template, the social media links look like this:


To get the social media icons, I am using the Fontawesome Librbary. To use Fontawesome, you must include the following code in your page head:

<link rel="stylesheet" href="" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

(The Fontawesome link is already included in the template code found on Twitch Website Builder.)


Social media links are placed inside the "social" container. Each individual link is placed inside link tags. We will use CSS to style our social links.

Mouse hover over the blue ➼ to highlight the code.
<!-- Social Links Container -->
<div class="row social" align="center">
   <a target = "blank" href = ''><i class="fab fa-twitch"></i></a>
   <a target = "blank" href = ''><i class="fab fa-youtube"></i></a>
   <a target = "blank" href='' ><i class="fab fa-twitter"></i></a>
   <a target = "blank" href=''><i class='fab fa-facebook'></i></a>
   <a target = "blank" href=''><i class='fab fa-instagram'></i></a>
   <a target="blank" href=""><i class="fab fa-mastodon"></i></a>
   <a target="blank" href=""> <i class="fab fa-discord"></i></a>

➼ target - Links with a target attribute open in another tab. The general rule: external links have a target and internal links do not. You want to use the same variable name for each target attribute, so every external link opens on the same tab.

➼ href - The href attribute equals the link to your social media page.

➼ icon - These are the icons that I copied and pasted from Fontawesome.


Social Container

Our social links are placed inside a social container.

.social {
  padding: 15px;
  margin: 5px;
  border-radius: 6px;
  position: relative;
  overflow: hidden;

➼ padding - CSS Padding Tutorial

➼ margin - CSS Margin Tutorial

➼ border-radius - CSS Border-radius Tutorial

➼ position - CSS Position Tutorial

➼ overflow - CSS Overflow Tutorial

Social Links

The following code styles the links inside our social container. Notice the links display as an inline block. This is usually done with elements you want to place side by side, but also want to set specific height, width, margin, and padding.

/* Social Media Links*/
.social a{
  font-size: 30px;
  color: #F4FFFE;
  border-style: groove;
  border-color: grey;
  padding: 10px;
  margin: 10px;
  border-radius: 6px;
  display: inline-block

Social Links on Hover

The following code describes what happens when a user mouse hovers over the social links.

/* Social Media Links on mouse hover */
.social a:hover {
  background-color: darkred;
  color: white;
  -webkit-transition: background-color 0.6s ease-out, color 0.6s ease-out;
  -moz-transition: background-color 0.6s ease-out, color 0.6s ease-out;
  -o-transition: background-color 0.6s ease-out, color 0.6s ease-out;
  transition: background-color 0.6s ease-out, color 0.6s ease-out;

Notice the transitions used. The code is described in the Menus Tutorial.

Previous Lesson | Next Lesson