"social icon"
Bootstrap 3.2.0 Snippet by Sagar Joshi

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> <body> <div class="test"><a href="#"> <p>Facebook</p></a><a href="#"> <p>Twitter</p></a><a href="#"> <p>Google+</p></a><a href="#"> <p>Github</p></a><a href="#"> <p>Dribble</p></a><a href="#"> <p>CodePen</p></a></div> </body> </div> </div>
body { background-color: #cc4a14; text-align: center; } .test { margin-top: 125px; } .test a { color: #fff; background: #99583d; border-radius: 4px; text-align: center; text-decoration: none; font-family: fontawesome; position: relative; display: inline-block; width: 40px; height: 40px; padding-top: 12px; margin: 0 2px; transition: all .5s; } .test a:hover { background: #ff0000; } .test a:hover p { bottom: 35px; visibility: visible; } .test a p { color: #666; position: absolute; bottom: 0; left: -25px; right: -25px; padding: 5px 7px; z-index: -1; font-size: 14px; border-radius: 2px; background: #fff; visibility: hidden; transition: all 0.5s cubic-bezier(0.6, -0.6, 0.2, 1.5); } .test a p:before { content: ''; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #fff; position: absolute; bottom: -5px; left: 40px; } a:nth-of-type(1):before { content: '\f09a'; } a:nth-of-type(2):before { content: '\f099'; } a:nth-of-type(3):before { content: '\f0d5'; } a:nth-of-type(4):before { content: '\f113'; } a:nth-of-type(5):before { content: '\f17d'; } a:nth-of-type(6):before { content: '\f1cb'; }

Related: See More

Material Dashboard Pro React
Navbar with Social icon & Dropdown
Animated 3d social icon in css3
Bootstrap 4 Navbar with Icon Top

Questions / Comments: