Search here...
News

How to include Social Media Icons in HTML ? – GeeksforGeeks

Admin

Table of Contents

In this article, we will see how to add social media icons to any web site using HTML and CSS Approach: If you want to attach an icons then you need a font-awesome CDN link. social media could be identical helpful in promoting and advertising your web site. If your trade name has social media accounts, it would be wise to give the web site 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 follow CDN connection inside section.

Syntax:



 Example 1: In this case, we are using font awesome icon (Google Icons  and  Bootstrap Icons) .
 
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
>
 
 
        
        
<
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 

section.


 


 
 Syntax:
 

facebook


 Example: 
 
HTML
 
  
    
  
 
 
  
  




<
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 case, we are using SVG or PNG  Images to an picture. Syntax:
 






 Note:  You can select SVG icon through diverse websites like heroicons, bootstrap icons etc. Bootstrap picture is used in below exemplar
 
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
>
 
 
        
        
<
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
>
 
 
        
        
<
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
>
 
 
        
        
<
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:  
 
My Personal Notes
  
arrow_drop_up
 
 
 
 source : https://shoppingandreview.com 
 Category : News 
 
 

 
 

spot_imgspot_img
 
 

Subscribe
 
 

 

Related articles
 
 



 
 
 
 
 
 
 Digital Marketing 
Biggest Social Media Platforms as Per User Base
 
   
 
 The web is the sacred lifeline of industrial development...
 
 Read more 
 
 
 
 
 
 
 
 
 
 Entertainment 
AniMixPlay Review – Is AniMixPlay Safe?
 
   
 
 AniMixPlay is a website where you can watch anime...
 
 Read more 
 
 
 
 
 
 
 
 
 
 Gaming 
TweakVip and Offroad Outlaws
 
   
 
 There are several applications that make your life more...
 
 Read more 
 
 
 
 
 
 
 
 
 
 Home and Decor 
The Benefits of Green Buildings
 
   
 
 The term green building can be used to describe...
 
 Read more 
 
 
 
 
 
 
 
 
 
 Gaming 
Pacman 30th Anniversary: New Google Doodle
 
   
 
 A modified version of the Google doodle honoring Pacman...
 
 Read more 
 
 
 
 
 

 

 

 

 
 

Previous articleHow to Log in to Your Facebook Account without Code Generator – Make Tech Easier
Next articleThe Facebook Logo and the History Behind the Company – PNC LOGOS
 
 

Adminhttps://shoppingandreview.com
 


 
 

 








 
 
 
 
 
 
 
 

 
 




 

 

 

 
 

 

 

 

About Us
 
 

At Shopping and Review, we give our readers a closer look at top-trending and high-quality products so that they can make a wise decision before purchasing the items.
 
 
 

 

 

 

 

Must Read
 
 



 
 
 
 
 
 
 
Biggest Social Media Platforms as Per User Base
 
 Digital Marketing   0  
 
 The web is the sacred lifeline of industrial development...
 
 
 
 
 
 
 
 
 
 
AniMixPlay Review – Is AniMixPlay Safe?
 
 Entertainment   0  
 
 AniMixPlay is a website where you can watch anime...
 
 
 
 
 
 
 
 
 
 
TweakVip and Offroad Outlaws
 
 Gaming   0  
 
 There are several applications that make your life more...
 
 
 
 
 

 

 

Contact Us
 

 

 

 
 

© 2021 tagDiv. All Rights Reserved. Made with Newspaper Theme.