Open In App

How to include Social Media Icons in HTML ?

Improve
Improve
Like Article
Like
Save
Share
Report

If you want to attach 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 icons ( Font Awesome). In this article, explore both ways.

Method 1: Using Font Awesome Icons

Font Awesome Icons are a popular set of scalable vector icons that can be customized and easily integrated into web projects, enhancing visual appeal and user experience. To use Font Awesome Icons, add the following CDN link inside the <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 : 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=
 
    <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: Using Google Icons

Google Icons, similar to Font Awesome, provide a versatile array of scalable vector icons, enriching web design with easily customizable symbols .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: In this example we will see the design of icons using google icons with an example.

HTML




<!DOCTYPE>
<html>
 
<head>
    <link rel="stylesheet" href=
</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: Using SVG or PNG Images

In this we can simply use downloaded svg or png images for better social media icons by downloading from google.

Note: You can select SVG icon through various websites like heroicons, bootstrap icons etc. Bootstrap icon is used in below example

Syntax:

<svg class="bi bi-google" width="64" height="64" viewBox="0 0 16 16">
   <path d=" "/>
</svg>

Example: In this example, we will use social icons just by downloading from web.

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:



Last Updated : 16 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads