Free UI/UX design course

Learn how to create exceptional designs by reading my new tutorial.

Start learning

Social media buttons

This lesson will be light, simple and nice. We will create a footer that will crown our portfolio and add social media buttons to it.

Where to get social media icons?

MDB provides you with over 1,500 different icons, including icons for all major social media.

You can find them all in our Icon Search. If you want to filter only to icons of well-known companies (such as social media platforms), select "brand" in the checkbox on the right.

        
            
  
  <!-- Facebook -->
<i class="fab fa-facebook-f"></i>

<!-- Twitter -->
<i class="fab fa-twitter"></i>

<!-- Google -->
<i class="fab fa-google"></i>

<!-- Instagram -->
<i class="fab fa-instagram"></i>

<!-- Linkedin -->
<i class="fab fa-linkedin-in"></i>

<!-- Pinterest -->
<i class="fab fa-pinterest"></i>

<!-- Vkontakte -->
<i class="fab fa-vk"></i>

<!-- Stack overflow -->
<i class="fab fa-stack-overflow"></i>

<!-- Youtube -->
<i class="fab fa-youtube"></i>

<!-- Slack -->
<i class="fab fa-slack-hash"></i>

<!-- Github -->
<i class="fab fa-github"></i>

<!-- Dribbble -->
<i class="fab fa-dribbble"></i>

<!-- Reddit -->
<i class="fab fa-reddit-alien"></i>

<!-- Whatsapp -->
<i class="fab fa-whatsapp"></i>
Brand colors & size

By using size classes you can change the size of the icons.

Use inline CSS to add brand colors.

        
            
  
        <!-- Facebook -->
        <i class="fab fa-facebook-f fa-2x" style="color: #3b5998;"></i>

        <!-- Twitter -->
        <i class="fab fa-twitter fa-2x" style="color: #55acee;"></i>
  
        <!-- Google -->
        <i class="fab fa-google fa-2x" style="color: #dd4b39;"></i>
  
        <!-- Instagram -->
        <i class="fab fa-instagram fa-2x" style="color: #ac2bac;"></i>
  
        <!-- Linkedin -->
        <i class="fab fa-linkedin-in fa-2x" style="color: #0082ca;"></i>
  
        <!-- Pinterest -->
        <i class="fab fa-pinterest fa-2x" style="color: #c61118;"></i>
  
        <!-- Vkontakte -->
        <i class="fab fa-vk fa-2x" style="color: #4c75a3;"></i>
  
        <!-- Stack overflow -->
        <i class="fab fa-stack-overflow fa-2x" style="color: #ffac44;"></i>
  
        <!-- Youtube -->
        <i class="fab fa-youtube fa-2x" style="color: #ed302f;"></i>
  
        <!-- Slack -->
        <i class="fab fa-slack-hash fa-2x" style="color: #481449;"></i>
  
        <!-- Github -->
        <i class="fab fa-github fa-2x" style="color: #333333;"></i>
  
        <!-- Dribbble -->
        <i class="fab fa-dribbble fa-2x" style="color: #ec4a89;"></i>
  
        <!-- Reddit -->
        <i class="fab fa-reddit-alien fa-2x" style="color: #ff4500;"></i>
  
        <!-- Whatsapp -->
        <i class="fab fa-whatsapp fa-2x" style="color: #25d366;"></i>
Social media buttons

Combining our icons and custom colors you can create social buttons.

Note: If you use custom colors via inline CSS you need to remove our predefined color classes like .btn-primary or .btn-danger. Instead of this, you need to add class .text-white to provde a white color for the text inside the button.

In the example below, we place a Facebook icon <i class="fab fa-facebook-f"></i> inside the button and set a background-color to #3B5998 (facebook brand color). 

        
            
  
      <a class="btn text-white" style="background-color: #3b5998;" href="#!" role="button">
        <i class="fab fa-facebook-f"></i>
      </a>
Floating social button

By adding .btn-floating class you can create a nice, floating social button.

        
            
  
      <a class="btn text-white btn-lg btn-floating" style="background-color: #ac2bac;" href="#!" role="button">
        <i class="fab fa-instagram"></i>
      </a>

Alright, so let's go back to our portfolio and create a footer with social media buttons.

Step 1 - create a footer

Let's create a simple footer with centered text and a background color the same as the background of testimonial cards. Additionally, let's add a container inside with padding on the Y axis:

        
            
  
    <!--Footer-->
    <footer class="text-center"  style="background-color: hsl(218, 62.2%, 95%)">
      <div class="container py-4">
        
      </div>
    </footer>
    <!--Footer-->
Step 2 - Add a copyright section

Below the container, add a copyright section with your details and a color that will match the rest of the footer:

        
            
  
    <!--Footer-->
    <footer class="text-center" style="background-color: hsl(218, 62.2%, 95%)">
      <div class="container py-4">
  
      </div>

      <!-- Copyright -->
      <div class="text-center p-3" style="background-color: hsla(218, 62.2%, 35%, 0.2)">
        © 2022 Copyright:
        <a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>
      </div>
      <!-- Copyright -->

    </footer>
    <!--Footer-->
Step 3 - add social media buttons

Using the knowledge we learned above, add social media buttons in the footer container that will lead to your profiles:

        
            
  
    <!--Footer-->
    <footer class="text-center" style="background-color: hsl(218, 62.2%, 95%)">
      <div class="container py-4">
  
        <!-- Facebook -->
        <a class="btn text-white btn-floating m-2" style="background-color: #3b5998;" href="#!" role="button"><i
            class="fab fa-facebook-f"></i></a>
  
        <!-- Twitter -->
        <a class="btn text-white btn-floating m-2" style="background-color: #55acee;" href="#!" role="button"><i
            class="fab fa-twitter"></i></a>
  
        <!-- Google -->
        <a class="btn text-white btn-floating m-2" style="background-color: #dd4b39;" href="#!" role="button"><i
            class="fab fa-google"></i></a>
  
        <!-- Instagram -->
        <a class="btn text-white btn-floating m-2" style="background-color: #ac2bac;" href="#!" role="button"><i
            class="fab fa-instagram"></i></a>
  
        <!-- Linkedin -->
        <a class="btn text-white btn-floating m-2" style="background-color: #0082ca;" href="#!" role="button"><i
            class="fab fa-linkedin-in"></i></a>
        <!-- Github -->
        <a class="btn text-white btn-floating m-2" style="background-color: #333333;" href="#!" role="button"><i
            class="fab fa-github"></i></a>
  
      </div>
      <!-- Copyright -->
      <div class="text-center p-3" style="background-color: hsla(218, 62.2%, 35%, 0.2)">
        © 2022 Copyright:
        <a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>
      </div>
      <!-- Copyright -->
    </footer>
    <!--Footer-->
Demo and source code for this lesson
John Doe

About author

Michal Szymanski
@ascensus_mdb

Co Founder at MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.