How to include Social Media Icons in HTML ? - GeeksforGeeks

24 Jun, 2021
In this article, we will see how to add social media icons to any website using HTML and CSS
Approach:
If you want to attach an icons then you need a font-awesome CDN link. Social media could be very helpful in promoting and advertising your website. If your brand has social media accounts, it would be wise to give the website visitors an opportunity to join them and share your posts in their timelines.
Note: You can either add Social Media icons as images( SVG, PNG ) or Font icon ( Font awesome ). In this article, explore both ways.
 
Method 1: To use Font Awesome Icons, add the following CDN link inside <head> section.
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
Syntax:
<a href="#" class="fa fa-facebook"></a>
Example 1: In this example, we are using font awesome icon (Google Icons and Bootstrap Icons).
HTML
<!DOCTYPE html><html>  <head>    <meta name="viewport" content=        "width=device-width, initial-scale=1" />    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />      <style>        .fa:hover {            opacity: 0.9;        }          .fa-linkedin {            background: #007bb5;            color: white;        }          .fa-pinterest {            background: #cb2027;            color: white;        }          .fa-reddit {            background: #ff5700;            color: white;        }          .fa {            padding: 20px;            font-size: 40px;            width: 60px;            text-decoration: none;            margin: 5px 80px;        }          h1 {            color: green;        }    </style></head>  <body>    <center>        <h1>GeeksforGeeks</h1>        <h3>Social Media Icons</h3>          <!-- Add font awesome icons -->        <a href="#" class="fa fa-linkedin"></a>        <a href="#" class="fa fa-pinterest"></a>        <a href="#" class="fa fa-reddit"></a>    </center></body>  </html>
Output:
 Method 2: To use Google Icons, add the following link inside <head> section.
<link rel=”stylesheet” href=”https://fonts.googleapis.com/icon?family=Material+Icons”>
Syntax:
<i class="material-icons">facebook</i>
Example:
HTML
<!DOCTYPE><html>  <head>    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /></head>  <style>    h1 {        color: green;    }      .material-icons {        padding: 10px;        font-size: 40px;        width: 40px;        text-decoration: none;        margin: 5px 80px;    }      .android {        background: #a4c639;        color: white;    }      .facebook {        background: #3b5998;        color: white;    }</style>  <body>    <center>        <h1>GEEKSFORGEEKS</h1>        <h3>Google Font Icon</h3>        <i class="material-icons android">android </i>        <i class="material-icons facebook">facebook</i>    </center></body>  </html>
Output:
Method 3: In this example, we are using SVG or PNG Images to an icon.
Syntax:
<svg class="bi bi-google" width="64" height="64" viewBox="0 0 16 16">
   <path d=" "/>
</svg>
Note: You can select SVG icon through various websites like heroicons, bootstrap icons etc. Bootstrap icon is used in below example
HTML
<!DOCTYPE html><html><style>    h1 {        color: green;    }      .bi-twitter {        color: #55acee;        margin: 5px 20px;    }      .bi-google {        color: #dd4b39;        margin: 5px 20px;    }      .bi-youtube {        color: #dd4b39;        margin: 5px 20px;    }</style>  <body>    <center>        <h1>GEEKSFORGEEKS</h1>          <!----  TWITTER ICON  --->        <svg xmlns="http://www.w3.org/2000/svg" width="64"             height="64" fill="currentColor" class="bi bi-twitter"            viewBox="0 0 16 16">              <path d="M5.026 15c6.038 0 9.341-5.003             9.341-9.334 0-.14 0-.282-.006-.422A6.685             6.685 0 0 0 16 3.542a6.658 6.658 0 0             1-1.889.518 3.301 3.301 0 0 0 1.447-1.817            6.533 6.533 0 0 1-2.087.793A3.286 3.286 0             0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429             3.289 3.289 0 0 0 1.018 4.382A3.323 3.323             0 0 1 .64 6.575v.045a3.288 3.288 0 0 0             2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23             3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067             2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32             0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />        </svg>          <!----  GOOGLE ICON  --->        <svg xmlns="http://www.w3.org/2000/svg" width="64"             height="64" fill="currentColor" class="bi bi-google"            viewBox="0 0 16 16">              <path d="M15.545 6.558a9.42 9.42 0 0 1 .139             1.626c0 2.434-.87 4.492-2.384 5.885h.002C11.978             15.292 10.158 16 8 16A8 8 0 1 1 8 0a7.689 7.689             0 0 1 5.352 2.082l-2.284 2.284A4.347 4.347 0 0             0 8 3.166c-2.087 0-3.86 1.408-4.492 3.304a4.792             4.792 0 0 0 0 3.063h.003c.635 1.893 2.405 3.301             4.492 3.301 1.078 0 2.004-.276 2.722-.764h-.003            a3.702 3.702 0 0 0 1.599-2.431H8v-3.08h7.545z" />        </svg>          <!---- YOUTUBE ICON  --->        <svg xmlns="http://www.w3.org/2000/svg" width="64"             height="64" fill="currentColor" class="bi bi-youtube"            viewBox="0 0 16 16">              <path d="M8.051 1.999h.089c.822.003 4.987.033             6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172            .883.22 1.402l.01.104.022.26.008.104c.065.914.073            1.77.074 1.957v.075c-.001.194-.01 1.108-.082             2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235             1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312            -5.569.334-6.18.335h-.142c-.309 0-1.587-.006            -2.927-.052l-.17-.006-.087-.004-.171-.007-.171            -.007c-1.11-.049 -2.167-.128-2.654-.26a2.007             2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986            -.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0             1 0 7.68v-.123c.002-.215.01-.958.064-1.778l            .007-.103.003-.052.008-.104.022-.26.01-.104c            .048-.519.119-1.023.22-1.402a2.007 2.007 0 0             1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17            -.007.172-.006.086-.003.171-.007A99.788 99.788             0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157            -2.408L6.4 5.209z" />        </svg>    </center></body>  </html>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Properties
CSS-Questions
HTML-Questions
HTML-SVG
icon resources
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Primer CSS Flexbox Flex Direction
HTML Course | First Web Page | Printing Hello World
Design a web page using HTML and CSS
Search Bar using HTML, CSS and JavaScript
How to wrap the text around an image using HTML and CSS ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?
Form validation using HTML and JavaScript
How to set input type date in dd-mm-yyyy format using HTML ?
How to set the default value for an HTML <select> element ?