Integrating icons into your website can significantly improve its visual appeal. By adding social media icons to your site, you give visitors an easy way to connect with your brand and share your content, which can boost your visibility and engagement by as much as 60%.
You can either add Social Media icons as images( SVG, PNG ) orCSS Icons. In this article, explore both ways.
Table of Content
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 icons to include facebook icon in our webpage.
<!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: 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.
<!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: 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 hero icons, 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.
<!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="https://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="https://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="https://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:
