How to use Font Awesome Icons In HTML

Method 2: Using Google 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=
"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>w3wiki</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:

How to include Social Media Icons in HTML ?

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.

Table of Content

Method 1: Using Font Awesome Icons
Method 2: Using Google Icons
Method 3: Using SVG or PNG Images

Tags:

#CSS-Questions #HTML-SVG #icon resources #HTML #Web Technologies

Method 2: Using Google Icons

How to use Font Awesome Icons In HTML

Syntax:

HTML

How to include Social Media Icons in HTML ?

Similar Reads

Contact Us