"social"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Cutcopy/pen/vEGwZR?depth=everything&limit=all&order=popularity&page=3&q=linux&show_forks=false" /> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <style class="cp-pen-styles">.reviews{ margin-top: 28px; } .reviews div{ display: inline-block; positon: absolute; left: 260px; //left: 156px; } .socials div{ display: inline-block; } .fa.fa-facebook, .fa.fa-linkedin, .fa.fa-google-plus, .fa.fa-youtube, .fa.fa-twitter, .fa.fa-rss, .fa.fa-yelp,.fa.fa-github,.fa.fa-linux, .fa.fa-music{ color: white; font-size: 50px; line-height: 60px; text-shadow: 2px 2px 10px black; } #itunes{ width: 49px; height: 49px; border: 3px solid white; border-radius: 50%; positon: absolute; } .fa.fa-music{ font-size: 32px; position: relative; bottom: 8px; right: 1px; padding: 3px; } #hexagon { width: 100px; height: 60px; background: #5F6062; position: relative; top: 100px; text-align: center; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #hexagon:before { content: ""; position: absolute; top: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid #5F6062; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #hexagon:after { content: ""; position: absolute; bottom: -24px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 25px solid #5F6062; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #hexagon:hover{ background: #EC008C; } #hexagon:hover:after{ border-top: 25px solid #EC008C; } #hexagon:hover:before{ border-bottom: 25px solid #EC008C; }</style></head><body> <div class="socials"> <div id="hexagon"><i class="fa fa-facebook"></i></div> <div id="hexagon"><i class="fa fa-linkedin"></i></div> <div id="hexagon"><i class="fa fa-google-plus"></i></div> <div id="hexagon"><i class="fa fa-youtube"></i></div> <div id="hexagon"><i class="fa fa-twitter"></i></div> <div id="hexagon"><i class="fa fa-rss"></i></div> </div> <div class="reviews"> <div id="hexagon"><i class="fa fa-yelp"></i></div> <div id="hexagon"><i class="fa fa-github"></i></div> <div id="hexagon"><i class="fa fa-linux"></i></div> <div id="hexagon"><div id="itunes"><i class="fa fa-music"></i></div></div> </div> </body></html>

Related: See More

Vue Material Dashboard
Bootstrap Social Card
Navbar with Social icon & Dropdown
social network layout - bootstrap 4

Questions / Comments: