Why need to show social media icon on website or blog?
Social media icon needs to add in our website when we have social pages related with our website. In that case, we use social media icon. Behind social media icon we use the specific links. When anyone click a specific social media icon then it redirect to the specific social pages.
The main motive to use social media icon in the website is we are going to suggest our website users that we have social pages also and you can follow us with our social sites. That's the main motive to use social media icon in our websites/blog.
In this article, I'm going to showing how to add social media icon in our website or blog easily.
Here, i will use some HTML and CSS code to create the shape.
Why HTML and CSS Code?
HTML - Hypertext Markup Language. It is used for documents designed to be displayed in a web browser.
CSS - Cascading Style Sheets. It is used for explaining the presentation of a document written in a markup language.
Below is the demo that i am going to create.
Demo:
Just Copy the following code:
<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
<style>
.gvusion-socials-icons{
margin:0 0 20px 0
}
.gvusion-socials-icons ul{
margin:0;
padding:0;
list-style:none;
margin-bottom:-5px;
margin-right:-5px;
overflow:hidden
}
.gvusion-socials-icons ul li:before{
display:none
}
.gvusion-socials-icons ul li{
margin:0;
padding:0;
list-style:none;
float:left;
width:45px;
height:45px;
line-height:45px;
text-align:center;
background:#00baff;
font-size:21px;
margin-right:5px;
margin-bottom:5px;
opacity:.9;
border-radius:3px;
}
.gvusion-socials-icons ul li:hover{
opacity:1;
}
.secondary-sidebar .gvusion-socials-icons ul li{
width:36px;
height:36px
}
.secondary-sidebar .gvusion-socials-icons ul li a{
line-height:45px
}
.secondary-sidebar .gvusion-socials-icons ul li a i{
font-size:20px
}
.gvusion-socials-icons ul li a{
line-height:45px;
display:block;
color:#fff;
}
.gvusion-socials-icons ul li a:hover{
color:#fff
}
.gvusion-socials-icons ul li.home{
background:#83868a;
}
.gvusion-socials-icons ul li.facebook{
background:#516ca4;
}
.gvusion-socials-icons ul li.googleplus{
background:#f20000;
}
.gvusion-socials-icons ul li.rss{
background:#f29400
}
.gvusion-socials-icons ul li.youtube{
background:#f20000
}
.gvusion-socials-icons ul li.dribbble{
background:#dc71a6
}
.gvusion-socials-icons ul li.deviantart{
background:#4c5e51
}
.gvusion-socials-icons ul li.pinterest{
background:#f20000
}
.gvusion-socials-icons ul li.instgram{
background:#406f94
}
.gvusion-socials-icons ul li.tumblr{
background:#395875
}
.gvusion-socials-icons ul li.linkedin{
background:#1985bc
}
.gvusion-socials-icons ul li.soundcloud{
background:#f60
}
</style>
<div class="gvusion-socials-icons mom-socials-widget">
<ul>
<li class="facebook">
<a href="https://www.facebook.com/BanglaTutorialsPoint" target="_blank" title="Follow us on Facebook"><i class="fa fa-facebook"> </i></a>
</li>
<li class="twitter">
<a href="http://www.twitter.com/amitsarkercse" target="_blank" title="Follow us on Twitter"><i class="fa fa-twitter"></i></a>
</li>
<li class="googleplus">
<a href="https://plus.google.com/" target="_blank" title="Follow us on Google+"><i class="fa fa-google-plus"></i></a>
</li>
<li class="instagram">
<a href="https://www.instagram.com/" target="_blank" title="Follow us on instagram"><i class="fa fa-instagram "></i></a>
</li>
<li class="youtube">
<a href="https://www.youtube.com/channel/UCW_xg9-8FU8SINc-EjDQ53g" rel="dofollow" target="_blank" title="Follow us on Youtube"><i class="fa fa-youtube "></i></a>
</li>
<li class="pinterest">
<a href="https://www.pinterest.com/" target="_blank" title="Follow us on Pinterest"><i class="fa fa-pinterest "></i></a>
</li>
</ul>
</div>
Now time to paste the copied code in the following "HTML/JavaScript" Gudget according to the following images:
In the below, there is a video. you can also watch the following video to understand the procedure.
https://www.youtube.com/watch?v=wA6hTbMy99Y
EmoticonEmoticon