Today, We want to share with you bootstrap social media icons footer.In this post we will show you bootstrap social media icons navbar, hear for font awesome social media icons we will give you demo and example for implement.In this post, we will learn about social media links for website with an example.
how to add social media icons in html?
Example 1: index.html
first of all Adding font awesome icon library and then all the available class used to create a social media icons Using font awesome icons.
<html>
<head>
<title>Social Media Icon Example - www.pakainfo.com</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa {
width: 25px;
padding: 20px;
font-size: 25px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
color: white;
border-radius: 50%;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
}
.fa-twitter {
background: #55ACEE;
}
.fa-google {
background: #dd4b39;
}
.fa-linkedin {
background: #007bb5;
}
.fa-youtube {
background: #bb0000;
}
.fa-instagram {
background: #8a3ab9;
}
.fa-whatsapp {
background: #4FCE5D;
}
.fa-pinterest {
background: #cb2027;
}
.fa-snapchat-ghost {
background: #fffc00;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.fa-skype {
background: #00aff0;
}
.fa-github {
background: #000000;
}
.fa-dribbble {
background: #ea4c89;
}
.fa-vimeo {
background: #45bbff;
}
.fa-foursquare {
background: #45bbff;
}
.fa-stumbleupon {
background: #eb4924;
}
.fa-flickr {
background: #f40083;
}
.fa-yahoo {
background: #430297;
}
.fa-reddit {
background: #ff5700;
}
.fa-rss {
background: #ff6600;
}
</style>
</head>
<body>
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-google"></a>
<a href="#" class="fa fa-linkedin"></a>
<a href="#" class="fa fa-youtube"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-whatsapp"></a>
<a href="#" class="fa fa-pinterest"></a>
<a href="#" class="fa fa-snapchat-ghost"></a>
<a href="#" class="fa fa-skype"></a>
<a href="#" class="fa fa-github"></a>
<a href="#" class="fa fa-dribbble"></a>
<a href="#" class="fa fa-vimeo"></a>
<a href="#" class="fa fa-foursquare"></a>
<a href="#" class="fa fa-stumbleupon"></a>
<a href="#" class="fa fa-flickr"></a>
<a href="#" class="fa fa-yahoo"></a>
<a href="#" class="fa fa-reddit"></a>
<a href="#" class="fa fa-rss"></a>
</body>
</html>
Add icon library
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Add font awesome icons
<a href="#" class="fa fa-facebook"></a> <a href="#" class="fa fa-twitter"></a>
Bootstrap 4 Footer with Social icons
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Footer with Social icons</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
</head>
<body>
<footer class="mainfooter" role="contentinfo">
<div class="footer-middle">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<!--Column1-->
<div class="footer-pad">
<h4>4cgandhi Search</h4>
<ul class="list-unstyled">
<li><a href="#"></a></li>
<li><a href="#">Calculator (2)</a></li>
<li><a href="#">Conversion (50)</a></li>
<li><a href="#">converter (62)</a></li>
<li><a href="#">Typing Tools (1)</a></li>
<li><a href="#">Web Tools (4)</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<!--Column1-->
<div class="footer-pad">
<h4>★★ Development Tools ★★</h4>
<ul class="list-unstyled">
<li><a href="#">Base64 Encode Online</a></li>
<li><a href="#">Online Image Editor</a></li>
<li><a href="#">Online JSON Editor</a></li>
<li><a href="#">Web Collaboration Whiteboard</a></li>
<li><a href="#">Latex Equation Editor</a></li>
<li><a href="#">Online Image Optimizer</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<!--Column1-->
<div class="footer-pad">
<h4>★★ Code Formatters ★★</h4>
<ul class="list-unstyled">
<li><a href="#">Online Java Formatter</a></li>
<li><a href="#">Online PHP Formatter</a></li>
<li><a href="#">Online Python Formatter</a></li>
<li><a href="#">Online HTML Formatter</a></li>
<li><a href="#">Online JSON Formatter</a></li>
<li>
<a href="#"></a>
</li>
</ul>
</div>
</div>
<div class="col-md-3">
<h4>Follow Us</h4>
<ul class="social-network social-circle">
<li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12 copy">
<p class="text-center">© Copyright 2018 - Pakainfo.com. All rights reserved.</p>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
CSS Code
/*FOOTER CSS Code*/
footer {
background: #16222A;
background: -webkit-linear-gradient(59deg, #3A6073, #16222A);
background: linear-gradient(59deg, #3A6073, #16222A);
color: white;
margin-top:100px;
}
footer a {
color: #fff;
font-size: 14px;
transition-duration: 0.2s;
}
footer a:hover {
color: #FA944B;
text-decoration: none;
}
.copy {
font-size: 12px;
padding: 10px;
border-top: 1px solid #FFFFFF;
}
.footer-middle {
padding-top: 2em;
color: white;
}
/*SOCÄ°AL Ä°CONS*/
/* footer social icons */
ul.social-network {
list-style: none;
display: inline;
margin-left: 0 !important;
padding: 0;
}
ul.social-network li {
display: inline;
margin: 0 5px;
}
/* footer social icons */
.social-network a.icoFacebook:hover {
background-color: #3B5998;
}
.social-network a.icoLinkedin:hover {
background-color: #007bb7;
}
.social-network a.icoFacebook:hover i,
.social-network a.icoLinkedin:hover i {
color: #fff;
}
.social-network a.socialIcon:hover,
.socialHoverClass {
color: #44BCDD;
}
.social-circle li a {
display: inline-block;
position: relative;
margin: 0 auto 0 auto;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
text-align: center;
width: 30px;
height: 30px;
font-size: 15px;
}
.social-circle li i {
margin: 0;
line-height: 30px;
text-align: center;
}
.social-circle li a:hover i,
.triggeredHover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms--transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s;
}
.social-circle i {
color: #595959;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
-ms-transition: all 0.8s;
transition: all 0.8s;
}
.social-network a {
background-color: #F9F9F9;
}
I hope you get an idea about HTML5 & Bootstrap Social Buttons Templates.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.