"rbnb icon"
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 lang='en' 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/ph1p/pen/ygbKoQ?limit=all&page=34&q=app" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'> <style class="cp-pen-styles">.logo { z-index: 1; position: absolute; left: 50%; top: 50%; margin: -130px 0 0 -130px; width: 260px; height: 260px; border-radius: 20%; background: linear-gradient(135deg, #ff5a60 0%, #ff588c 100%); border: 1px solid #ca4662; -webkit-box-shadow: 0 40px 100px rgba(202, 70, 98, 0.62); box-shadow: 0 40px 100px rgba(202, 70, 98, 0.62); } .logo__top { position: absolute; top: 35px; width: 67px; left: 95px; height: 29px; overflow: hidden; } .logo__top:before { content: ''; position: absolute; left: 0; top: 0; margin: 0; width: 43px; height: 60px; border-radius: 50%; border-width: 12px; border-style: solid; border-color: #fff; } .logo__sides { position: absolute; width: 100%; height: 100%; } .logo__sides:before, .logo__sides:after { content: ''; position: absolute; border-style: solid; border-color: #fff; -webkit-transform-origin: 0 0; transform-origin: 0 0; border-width: 12px 0 0 12px; } .logo__sides:before { left: 100.4px; top: 54px; height: 110px; -webkit-transform: rotate(26deg); transform: rotate(26deg); } .logo__sides:after { right: 102px; top: 59px; height: 110px; -webkit-transform: rotate(-26.5deg); transform: rotate(-26.5deg); } .logo__corners span { position: absolute; overflow: hidden; height: 54px; width: 61px; bottom: 43px; } .logo__corners span:after { content: ''; position: absolute; display: block; left: 0; bottom: 0; width: 59px; height: 59px; border-radius: 50%; border-width: 12px; border-style: solid; border-color: #fff; } .logo__corners span:first-child { left: 45px; } .logo__corners span:last-child { right: 47px; } .logo__corners span:last-child:after { right: 0; left: initial; } .logo__loop span { position: absolute; overflow: hidden; left: 98px; height: 44px; width: 68px; bottom: 116px; } .logo__loop span:after { content: ''; position: absolute; display: block; left: 0; top: 0; width: 39px; height: 44px; border-radius: 50%; border-width: 12px; border-style: solid; border-color: #fff; } .logo__loop span:nth-child(2) { bottom: 15px; left: 106px; width: 57px; height: 105px; } .logo__loop span:nth-child(2):after { left: initial; right: 0; top: -130px; width: 208px; height: 193px; } .logo__loop span:nth-child(3) { bottom: 15px; left: 96px; width: 57px; height: 105px; } .logo__loop span:nth-child(3):after { left: initial; left: 0; top: -130px; width: 208px; height: 194px; } </style></head><body> <div class="logo"> <div class="logo__top"></div> <div class="logo__sides"></div> <div class="logo__loop"> <span></span> <span></span> <span></span> </div> <div class="logo__corners"> <span></span> <span></span> </div> </div> </body></html>

Related: See More

Vue Light Bootstrap Dashboard
Bootstrap 4 Navbar with Icon Top
Hamburger Icon Animations
Navbar with Social icon & Dropdown

Questions / Comments: