My Blog

How to add Social Media Icons in Html

If we want to add social media icons in the Html document using the Internal CSS, to show them on the web page then we have to follow the steps which are given below. Using these simple steps, we can easily add the social media icons.

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want add the icons of social media.

<!Doctype Html>  
<Html>     
<Head>      
<Title>     
Add the icons of social media  
</Title>  
</Head>  
<Body>   
Hello User!...  
You are at google Site...  
</Body>   
</Html>

Step 2: Now, we have to place the cursor in the head tag just after the title tag of the Html document and then define the <style> tag as shown in the following block.

Step 3: And, then we have to use the following code between the closing and opening of <style> tag.

.fa {  
  padding: 20px;  
text-align: center;  
  margin: 5px 2px;  
  font-size: 30px;  
  width: 50px;  
}  
.fa-facebook {  
  background: #3B5998;  
  color: white;  
}  
.fa-twitter {  
  background: #55ACEE;  
  color: white;  
}  
.fa-pinterest {  
  background: #cb2027;  
  color: white;  
}  
.fa-linkedin {  
  background: #007bb5;  
  color: white;  
}  
.fa-instagram {  
  background: #125688;  
  color: white;  
}  
.fa-youtube {  
  background: #bb0000;  
  color: white;  
}  
.fa-google {  
  background: #dd4b39;  
  color: white;  
}  
.fa-snapchat-ghost {  
  background: #fffc00;  
  color: white;  
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;  
}  
.fa-skype {  
  background: #00aff0;  
  color: white;  
}  
.fa:hover {  
    opacity: 0.9;  
}

Step 4: When we added the above code successfully, then we have to link the css file in the <head> tag.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Step 5: And, then we have to use the following code in the <body> tag of Html document.

<a href="#" class="fa fa-facebook"></a>  
<a href="#" class="fa fa-twitter"></a>  
<a href="#" class="fa fa-pinterest"></a>  
<a href="#" class="fa fa-linkedin"></a>  
<a href="#" class="fa fa-instagram"></a>  
<a href="#" class="fa fa-youtube"></a>  
<a href="#" class="fa fa-google"></a>  
<a href="#" class="fa fa-snapchat-ghost"></a>  
<a href="#" class="fa fa-skype"></a>

Step 6: And, at last, we have to save the Html file and then run the file in the browser.

<!Doctype Html>  
<Html>     
<Head>     
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">   
<Title>     
Add the icons of social media  
</Title>  
<style>  
.fa {  
  padding: 20px;  
text-align: center;  
  margin: 5px 2px;  
  font-size: 30px;  
  width: 50px;  
}  
.fa-facebook {  
  background: #3B5998;  
  color: white;  
}  
.fa-twitter {  
  background: #55ACEE;  
  color: white;  
}  
.fa-pinterest {  
  background: #cb2027;  
  color: white;  
}  
.fa-linkedin {  
  background: #007bb5;  
  color: white;  
}  
.fa-instagram {  
  background: #125688;  
  color: white;  
}  
.fa-youtube {  
  background: #bb0000;  
  color: white;  
}  
.fa-google {  
  background: #dd4b39;  
  color: white;  
}  
.fa-snapchat-ghost {  
  background: #fffc00;  
  color: white;  
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;  
}  
.fa-skype {  
  background: #00aff0;  
  color: white;  
}  
.fa:hover {  
    opacity: 0.9;  
}  
</style>  
</Head>  
<Body>   
Hello User!... <br>  
You are at JavaTpoint Site... <br>  
Following are the icons of social media  
</br>  
<ul>  
<li>   
<a href="#" class="fa fa-facebook"> </a>   
</li>  
<li>  
<a href="#" class="fa fa-twitter"> </a>  
</li>  
<li>  
<a href="#" class="fa fa-pinterest"> </a>  
</li>  
<li>  
<a href="#" class="fa fa-linkedin"> </a>  
</li>  
<li>  
<a href="#" class="fa fa-instagram"> </a>  
</li>  
<li>  
<a href="#" class="fa fa-youtube"> </a>  
</li>  
<li>  
<a href="#" class="fa fa-google"> </a>  
</li>  
<li>  
<a href="#" class="fa fa-snapchat-ghost"> </a>  
</li>  
<li>  
<a href="#" class="fa fa-skype"> </a></li></ul></Body> </Html>

The output of above Html code is shown in the following screenshot:

How to add Social Media Icons in Html

Add Sticky Social Media Icons

If we want to add the sticky social media icons in the Html document using the Internal CSS and Html code, to show the icons on the web page then we have to follow the steps which are given below. Using these simple steps, we can easily add the sticky social media icons.

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want add the sticky icons of social media.

<!Doctype Html>  
<Html>     
<Head>      
<Title>     
Add the sticky icons of social media  
</Title>  
</Head>  
<Body>   
Hello User!...  
You are at JavaTpoint Site...  
</Body>   
</Html>

Step 2: Now, we have to place the cursor just after the <title> tag in the <head> tag of the Html document and then attach the CDN link. So, we have to type the following <link> tag in the <head> tag.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Step 3: Now, we have to design the structure of sticky media icons using the CSS code. So, we have to add the code as shown in the following block just after the <link> tag in the Html document.

<style>   
/* Style the Sticky icons on web page */   
.stickyicon-list {   
position: fixed;   
top: 200px;   
transform: translateY(-50%);             
}         
.stickyicon-list a {   
display: block;   
text-align: center;   
padding: 8px;   
transition: all 0.5s ease;   
color: white;   
font-size: 20px;   
}         
/* HOver affect on sticky social media icons */   
.stickyicon-list a:hover {   
color: #000;   
width:10px;   
}   
   
/* Now we have to design each icon of social media */         
.facebook {   
background: #3b5998;   
color: white;  
}         
.twitter {   
color: white;   
background: #00acee;   
}   
.linkedin {   
background: #0e76a8;   
color: white;   
}         
.google {   
color: white;   
background: #db4a39;   
}   
.instagram {   
background: #3f729b;   
color: white;   
}         
.youtube {   
color: white;   
background: #c4302b;    
}   
</style>

Step 4: Now, we have to add the following code in the <body> tag.

<div class="stickyicon-list">  
<a href="#facebook" class="facebook">   
<i class="fa fa-facebook"></i>   
</a>   
<a href="#twitter" class="twitter">   
<i class="fa fa-twitter"></i>   
</a>       
<a href="#linkedin" class="linkedin">   
<i class="fa fa-linkedin"></i>   
</a>   
<a href="#google" class="google">   
<i class="fa fa-google"></i>   
</a>     
<a href="#instagram" class="instagram">   
<i class="fa fa-instagram"></i>   
</a>                              
<a href="#youtube" class="youtube">   
<i class="fa fa-youtube"></i>   
</a>   
</div>

Step 5: And, at last, we have to save the Html file and then run the file in the browser.

<!Doctype Html>  
<Html>     
<Head>     
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  
<Title>     
Add the Sticky icons of social media  
</Title>  
<style>   
/* Style the Sticky icons on web page */   
.stickyicon-list {   
position: fixed;   
top: 200px;   
transform: translateY(-50%);             
}         
.stickyicon-list a {   
display: block;   
text-align: center;   
padding: 8px;   
transition: all 0.5s ease;   
color: white;   
font-size: 20px;   
}         
/* HOver affect on sticky social media icons */   
.stickyicon-list a:hover {   
color: #000;   
width:10px;   
}   
   
/* Now we have to design each icon of social media */         
.facebook {   
background: #3b5998;   
color: white;  
}         
.twitter {   
color: white;   
background: #00acee;   
}   
.linkedin {   
background: #0e76a8;   
color: white;   
}         
.google {   
color: white;   
background: #db4a39;   
}   
.instagram {   
background: #3f729b;   
color: white;   
}         
.youtube {   
color: white;   
background: #c4302b;    
}   
</style>   
</Head>  
<Body>   
Hello User!... <br>  
You are at JavaTpoint Site... <br>  
<div class="stickyicon-list">  
<a href="#facebook" class="facebook">   
<i class="fa fa-facebook"></i>   
</a>   
<a href="#twitter" class="twitter">   
<i class="fa fa-twitter"></i>   
</a>       
<a href="#linkedin" class="linkedin">   
<i class="fa fa-linkedin"></i>   
</a>   
<a href="#google" class="google">   
<i class="fa fa-google"></i>   
</a>     
<a href="#instagram" class="instagram">   
<i class="fa fa-instagram"></i>   
</a>                              
<a href="#youtube" class="youtube">   
<i class="fa fa-youtube"></i>   
</a>   
</div>   
</Body>  
</Html>

The output of sticky social media icons is shown in the following screenshot:

How to add Social Media Icons in Html

umairrouf

Leave a Reply

Your email address will not be published. Required fields are marked *