"icon"
Bootstrap 3.0.0 Snippet by evarevirus

<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/fstgerm/pen/qsxwJ?depth=everything&order=popularity&page=2&q=icon+box&show_forks=false" /> <style class="cp-pen-styles">body { background: #e6e6e6; } ul { list-style-type: none; padding: 0; margin: 0; font-size: 0; } ul li { width: 64px; height: 64px; border: 39px solid white; background: #FFF; display: inline-block; position: relative; vertical-align: top; margin: 5px; /* comment this ↓ to see the middle of the box */ } ul li:after { background: rgba(0, 100, 255, 0.1); width: 2px; height: 100%; position: absolute; left: 50%; margin-left: -1px; content: ''; } ul li:before { background: rgba(0, 100, 255, 0.1); height: 2px; width: 100%; position: absolute; top: 50%; margin-top: -1px; content: ''; } ul li:after, ul li:before { content: normal; } .icon { position: relative; display: inline-block; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; box-sizing: border-box; -moz-box-sizing: border-box; } .icon:after, .icon:before { content: ''; position: absolute; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; box-sizing: border-box; -moz-box-sizing: border-box; } .arrow-previous, .arrow-next, .arrow-bottom, .arrow-top { width: 100%; height: 100%; } .arrow-previous:before, .arrow-next:before, .arrow-bottom:before, .arrow-top:before, .arrow-previous:after, .arrow-next:after, .arrow-bottom:after, .arrow-top:after { width: 39px; height: 2px; background: black; content: ''; position: absolute; top: 50%; } .arrow-previous:before, .arrow-next:before, .arrow-bottom:before, .arrow-top:before { transform: rotate(-44deg); -webkit-transform: rotate(-44deg); -moz-transform: rotate(-44deg); -ms-transform: rotate(-44deg); -o-transform: rotate(-44deg); } .arrow-previous:after, .arrow-next:after, .arrow-bottom:after, .arrow-top:after { transform: rotate(44deg); -webkit-transform: rotate(44deg); -moz-transform: rotate(44deg); -ms-transform: rotate(44deg); -o-transform: rotate(44deg); } .arrow-previous:before, .arrow-previous:after { left: 25%; transform-origin: 0 0; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; } .arrow-next:before, .arrow-next:after { right: 25%; transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; } .arrow-bottom:before, .arrow-bottom:after { transform-origin: 50% 0; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; } .arrow-bottom:before { left: 0; transform: rotate(46deg); -webkit-transform: rotate(46deg); -moz-transform: rotate(46deg); -ms-transform: rotate(46deg); -o-transform: rotate(46deg); } .arrow-bottom:after { right: 0; transform: rotate(-46deg); -webkit-transform: rotate(-46deg); -moz-transform: rotate(-46deg); -ms-transform: rotate(-46deg); -o-transform: rotate(-46deg); } .arrow-top:before, .arrow-top:after { transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; } .arrow-top:before { left: 0; transform: rotate(-46deg); -webkit-transform: rotate(-46deg); -moz-transform: rotate(-46deg); -ms-transform: rotate(-46deg); -o-transform: rotate(-46deg); } .arrow-top:after { right: 0; transform: rotate(46deg); -webkit-transform: rotate(46deg); -moz-transform: rotate(46deg); -ms-transform: rotate(46deg); -o-transform: rotate(46deg); } .arrow-right, .arrow-left { height: 2px; width: 55px; background: black; position: absolute; top: 50%; margin-top: -1px; } .arrow-right:after, .arrow-left:after { content: ''; position: absolute; width: 25px; height: 25px; bottom: 1px; border: 2px solid black; } .arrow-right:after { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; border-left: none; border-top: none; right: -1px; } .arrow-left:after { transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform-origin: 0 100%; -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; border-right: none; border-top: none; left: -1px; } .smart-phone { width: 28px; height: 54px; border: 2px solid black; border-radius: 4px; position: absolute; left: 50%; top: 50%; margin: -25px 0 0 -14px; } .smart-phone:after { content: ''; position: absolute; width: 100%; top: 4px; bottom: 5px; border: 2px solid black; border-left: 0; border-right: 0; } .smart-phone:before { position: absolute; content: ''; left: 50%; bottom: 1px; width: 3px; height: 3px; margin-left: -1px; background: black; border-radius: 100%; } .information-button { width: 56px; height: 56px; border: 2px solid black; border-radius: 100%; position: absolute; left: 50%; top: 50%; margin: -28px auto auto -28px; } .information-button:before { width: 4px; height: 4px; background: black; border-radius: 100%; left: 50%; margin-left: -2px; top: 10px; } .information-button:after { width: 4px; height: 25px; background: black; border-radius: 10px; left: 50%; margin-left: -2px; bottom: 10px; } .speech-bubble { width: 56px; height: 40px; border: 2px solid black; position: absolute; top: 50%; left: 50%; margin: -20px 0 0 -28px; box-shadow: inset 10px 0 0 0 white, inset -10px 0 0 0 white, inset 0 13px 0 0 white, inset 0 15px 0 0 black, inset 0 -13px 0 0 white, inset 0 -15px 0 0 black; } .speech-bubble--no-text { box-shadow: none; } .speech-bubble:before { width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-right: 9px solid black; bottom: -14px; left: 10px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } .speech-bubble:after { width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-right: 9px solid white; bottom: -9px; left: 12px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } .bullet-list { width: 6px; height: 6px; background: white; border-radius: 100%; position: absolute; top: 50%; left: 6px; margin: -3px 0 0 0; box-shadow: 0 20px 0 0 white, 0 -20px 0 0 white, 0 0 0 2px black, 0 -20px 0 2px black, 0 20px 0 2px black; } .bullet-list:after { background: black; width: 32px; height: 2px; left: 18px; top: 50%; margin: -1px 0 0 0; box-shadow: 0 -20px 0 0 black, 0 20px 0 0 black; } .scale { width: 62px; height: 18px; border: 2px solid black; top: 50%; left: 50%; margin: -18px 0 0 -31px; background: linear-gradient(to right, transparent 66.66%, black 33.33%); background-size: 3px 6px; background-repeat: repeat-x; background-position: bottom left; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } .scale:after { width: 100%; height: 100%; background: linear-gradient(to right, transparent 90%, black 10%); background-size: 15px 8px; background-repeat: repeat-x; background-position: bottom left; } .credit-card { width: 56px; height: 40px; border: 2px solid black; position: absolute; top: 50%; left: 50%; margin: -20px 0 0 -28px; border-radius: 3px; } .credit-card:after { width: 100%; height: 6px; top: 7px; left: 0; background: black; } .credit-card:before { width: 16px; height: 5px; right: 5px; bottom: 7px; background: black; } .calendar-tick { width: 54px; height: 52px; position: absolute; top: 50%; left: 50%; margin: -26px 0 0 -27px; border: 2px solid black; box-shadow: inset 0 9px 0 0 white, inset 0 11px 0 0 black; } .calendar-tick:after { width: 20px; height: 14px; border: 2px solid black; border-top: 0; border-right: 0; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); left: 50%; top: 50%; margin: -7px 0 0 -10px; } .calendar-tick:before { width: 2px; height: 10px; background: black; left: 6px; top: -6px; box-shadow: 9px 0 0 0 black, 18px 0 0 0 black, 27px 0 0 0 black, 36px 0 0 0 black; } .outcoming { position: absolute; width: 32px; height: 46px; border: 2px solid black; border-right: 0; top: 50%; left: 5px; margin-top: -23px; } .outcoming:after { width: 46px; height: 2px; background: black; top: 50%; left: 6px; margin-top: -1px; } .outcoming:before { width: 20px; height: 20px; right: -24px; top: 50%; margin-top: -20px; border: 2px solid black; border-top: 0; border-left: 0; box-sizing: border-box; -moz-box-sizing: border-box; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; } .clock { width: 56px; height: 56px; border: 2px solid black; border-radius: 100%; position: absolute; left: 50%; top: 50%; margin: -28px 0 0 -28px; } .clock:after { width: 19px; height: 21px; border: 2px solid black; border-left: 0; border-top: 0; bottom: 50%; right: 50%; margin: 0 -1px -1px 0; box-sizing: border-box; -moz-box-sizing: border-box; } .mail { width: 56px; height: 36px; border: 2px solid black; position: absolute; left: 50%; top: 50%; margin: -18px 0 0 -28px; } .mail:before, .mail:after { background: black; width: 33px; height: 2px; top: 2px; } .mail:before { transform: rotate(34deg); -webkit-transform: rotate(34deg); -moz-transform: rotate(34deg); -ms-transform: rotate(34deg); -o-transform: rotate(34deg); transform-origin: 0 0; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; } .mail:after { right: 0; transform: rotate(-34deg); -webkit-transform: rotate(-34deg); -moz-transform: rotate(-34deg); -ms-transform: rotate(-34deg); -o-transform: rotate(-34deg); transform-origin: 100% 0; -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; } .add { position: absolute; left: 50%; top: 50%; margin: -28px 0 0 -3px; } .add, .add:before { background: black; height: 56px; width: 6px; border-radius: 10px; } .add:before { transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); } .bookmark { width: 42px; height: 56px; position: absolute; left: 50%; top: 50%; margin: -28px 0 0 -21px; border: 2px solid black; border-bottom: 0; } .bookmark:after { width: 30px; height: 30px; border: 2px solid black; border-right: 0; border-bottom: 0; top: 100%; left: 50%; margin: -15px 0 0 -15px; box-sizing: border-box; moz-box-sizing: border-box; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } .portfolio { width: 50px; height: 34px; position: absolute; left: 50%; top: 50%; margin: -17px 0 0 -25px; border: 2px solid black; box-shadow: inset 0 8px 0 0 white, inset 0 10px 0 0 black; } .portfolio:before { width: 18px; height: 7px; border: 2px solid black; border-bottom: 0; left: 50%; top: -9px; margin: 0 0 0 -9px; box-sizing: border-box; moz-box-sizing: border-box; } .portfolio:after { width: 4px; height: 4px; background: white; left: 7px; top: 10px; box-shadow: 0 0 0 1px black, 28px 0 0 0 white, 28px 0 0 1px black; } .hierarchy { width: 7px; height: 7px; background: white; position: absolute; left: 43px; top: 50%; margin-top: -4px; box-shadow: 0 -19px 0 0 white, 0 19px 0 0 white, 0 0 0 2px black, 0 -19px 0 2px black, 0 19px 0 2px black, -28px 0 0 2px white, -28px 0 0 4px black; } .hierarchy:before { width: 10px; height: 41px; border: 2px solid black; border-right: 0; top: -17px; left: -12px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; box-sizing: border-box; -moz-box-sizing: border-box; } .hierarchy:after { width: 15px; height: 2px; background: black; left: -17px; top: 50%; margin-top: -1px; } .converging-arrows { width: 78px; height: 2px; position: absolute; top: 50%; left: 50%; margin: -1px 0 0 -39px; box-shadow: inset 32px 0 0 0 black, inset -32px 0 0 0 black; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; } .converging-arrows:before, .converging-arrows:after { width: 20px; height: 20px; border: 2px solid black; top: 50%; margin-top: -10px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; box-sizing: border-box; -moz-box-sizing: border-box; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; } .converging-arrows:before { left: 10px; border-left: 0; border-bottom: 0; } .converging-arrows:after { right: 10px; border-right: 0; border-top: 0; } .not-charging { width: 50px; height: 24px; border: 1px solid black; position: absolute; top: 50%; left: 50%; margin: -12px 0 0 -25px; } .not-charging:after { width: 60px; height: 1px; background: black; left: 50%; top: 50%; margin: 0 0 0 -30px; box-shadow: 0 0 0 1px white; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } .not-charging:before { width: 5px; height: 10px; border: 1px solid black; border-left: 0; right: -6px; top: 50%; margin-top: -5px; } .battery { width: 44px; height: 24px; border: 1px solid black; position: absolute; top: 50%; left: 50%; margin: -12px 0 0 -22px; } .battery--two-bars:after, .battery--three-bars:after, .battery--four-bars:after { height: 16px; width: 5px; background: white; left: 3px; top: 3px; } .battery--two-bars:after { box-shadow: 0 0 0 1px black, 10px 0 0 0 white, 10px 0 0 1px black; } .battery--three-bars:after { box-shadow: 0 0 0 1px black, 10px 0 0 0 white, 10px 0 0 1px black, 20px 0 0 0 white, 20px 0 0 1px black; } .battery--four-bars:after { box-shadow: 0 0 0 1px black, 10px 0 0 0 white, 10px 0 0 1px black, 20px 0 0 0 white, 20px 0 0 1px black, 30px 0 0 0 white, 30px 0 0 1px black; } .battery:before { width: 5px; height: 10px; border: 1px solid black; border-left: 0; right: -6px; top: 50%; margin-top: -5px; } .menu-three-lines { position: absolute; top: 50%; left: 50%; margin: -1px 0 0 -28px; } .menu-three-lines, .menu-three-lines:after, .menu-three-lines:before { width: 56px; height: 2px; background: black; } .menu-three-lines:before { top: -20px; } .menu-three-lines:after { bottom: -20px; } .cross-out-mark { width: 84px; height: 2px; position: absolute; margin: -1px 0 0 -42px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; } .cross-out-mark, .cross-out-mark:after { background: black; left: 50%; top: 50%; } .cross-out-mark:after { height: 84px; width: 2px; margin: -42px 0 0 -1px; } .arrow-refresh { position: absolute; width: 54px; height: 54px; border: 2px solid black; border-radius: 100%; left: 50%; top: 50%; margin: -27px 0 0 -27px; } .arrow-refresh:before { width: 20px; height: 20px; background: white; right: -2px; bottom: 50%; } .arrow-refresh:after { width: 12px; height: 12px; border: 2px solid black; border-top: 0; border-left: 0; top: -6px; right: 6px; transform: rotate(-10deg); -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; } .wrong-sign { width: 56px; height: 56px; position: absolute; top: 50%; left: 50%; margin: -28px 0 0 -28px; border: 1px solid black; } .wrong-sign:before, .wrong-sign:after { width: 40px; height: 1px; background: black; top: 50%; left: 50%; margin-left: -20px; } .wrong-sign:before { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); } .wrong-sign:after { transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } .clapper { height: 30px; position: absolute; left: 50%; top: 50%; margin: -4px 0 0 -25px; } .clapper, .clapper:before, .clapper:after { width: 50px; border: 2px solid black; } .clapper:before, .clapper:after { height: 8px; left: -2px; background-position: -8px 0; background-size: 8px 8px; background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 7px, black 7px, black 8px); background-image: repeating-linear-gradient(-45deg, transparent, transparent 7px, black 7px, black 8px); } .clapper:before { top: -8px; } .clapper:after { top: -15px; transform: rotate(-15deg); -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -o-transform: rotate(-15deg); transform-origin: 0 100%; -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; } .tablet-locked { width: 36px; height: 56px; position: absolute; left: 50%; top: 50%; margin: -28px 0 0 -18px; border: 2px solid black; border-radius: 2px; box-shadow: inset 0 4px 0 0 white, inset 0 6px 0 0 black, inset 0 -6px 0 0 white, inset 0 -8px 0 0 black; } .tablet-locked:before { width: 8px; height: 8px; border: 1px solid black; border-radius: 100%; left: 50%; top: 17px; margin-left: -4px; box-shadow: 0 28px 0 -2px black; } .tablet-locked:after { width: 12px; height: 10px; border-radius: 1px; top: 22px; left: 50%; border: 1px solid black; background: white; margin-left: -6px; } .storage { width: 40px; height: 54px; border: 2px solid black; position: absolute; left: 50%; top: 50%; margin: -27px 0 0 -20px; } .storage:before { width: 10px; height: 2px; background: black; left: 50%; margin-left: -5px; top: 7px; box-shadow: 0 16px 0 0 black, 0 32px 0 0 black; } .storage:after { width: 30px; height: 2px; background: black; left: 50%; margin-left: -15px; top: 16px; box-shadow: 0 16px 0 0 black; } .card-and-machine { width: 56px; height: 14px; position: absolute; left: 50%; top: 50%; margin: -24px 0 0 -28px; } .card-and-machine, .card-and-machine:before { border: 2px solid black; } .card-and-machine:before, .card-and-machine:after { transform: skew(160deg, 0deg); -webkit-transform: skew(160deg, 0deg); -moz-transform: skew(160deg, 0deg); -ms-transform: skew(160deg, 0deg); -o-transform: skew(160deg, 0deg); } .card-and-machine:before { width: 34px; height: 40px; border-radius: 3px; background: white; left: 3px; top: 5px; background-color: white; background: linear-gradient(to right, white 55%, black 55%, black 72%, white 72%); background-size: 100% 100%; background-repeat: no-repeat; background-position: bottom left; } .card-and-machine:after { width: 4px; height: 12px; background: black; top: 27px; left: 7px; } .aim-target { width: 40px; height: 40px; border: 2px solid black; border-radius: 100%; position: absolute; left: 50%; top: 50%; margin: -20px 0 0 -20px; } .aim-target:before, .aim-target:after { width: 58px; height: 2px; box-shadow: inset 17px 0 0 0 black, inset -17px 0 0 0 black; top: 50%; left: 50%; margin: -1px 0 0 -29px; } .aim-target:after { transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); } .box { width: 40px; height: 40px; position: absolute; top: 50%; left: 50%; margin: -14px 0 0 -28px; box-shadow: inset 12px 0 0 0 white, inset -12px 0 0 0 white, inset 0 5px 0 0 white, inset 0 7px 0 0 black; } .box, .box:before, .box:after { border: 2px solid black; background: white; } .box, .box:before { width: 40px; } .box:before { height: 13px; border-bottom: 0; top: -15px; left: 6px; box-shadow: inset 17px 0 0 0 white, inset 19px 0 0 0 black; transform: skew(130deg, 0deg); -webkit-transform: skew(130deg, 0deg); -moz-transform: skew(130deg, 0deg); -ms-transform: skew(130deg, 0deg); -o-transform: skew(130deg, 0deg); } .box:after { height: 39px; width: 16px; border-left: 0; border-top: 0; top: -8px; left: 38px; transform: skew(0deg, 139deg); -webkit-transform: skew(0deg, 139deg); -moz-transform: skew(0deg, 139deg); -ms-transform: skew(0deg, 139deg); -o-transform: skew(0deg, 139deg); } .window-computer { width: 58px; height: 58px; border: 2px solid black; position: absolute; left: 50%; top: 50%; background: white; margin: -29px 0 0 -29px; box-shadow: inset 0 9px 0 0 white, inset 0 11px 0 0 black; } .window-computer:before, .window-computer:after { background: black; height: 3px; top: 3px; } .window-computer:before { width: 12px; left: 3px; } .window-computer:after { width: 3px; right: 3px; border-radius: 100%; box-shadow: -6px 0 0 0 black; } .circle-of-circles { width: 6px; height: 6px; border-radius: 100%; background: white; position: absolute; left: 50%; top: 50%; margin: -28px 0 0 -3px; box-shadow: 17px 8px 0 0 white, 24px 25px 0 0 white, 17px 42px 0 0 white, 0 48px 0 0 white, -17px 42px 0 0 white, -24px 25px 0 0 white, -17px 8px 0 0 white, 0 0 0 1px black, 17px 8px 0 1px black, 24px 25px 0 1px black, 17px 42px 0 1px black, 0 48px 0 1px black, -17px 42px 0 1px black, -24px 25px 0 1px black, -17px 8px 0 1px black; } .window-plus { width: 38px; height: 38px; position: absolute; top: 50%; left: 50%; margin: -12px 0 0 -26px; border: 2px solid black; box-shadow: 14px -14px 0 -2px white, 14px -14px 0 0 black; } .window-plus:before, .window-plus:after { background: black; left: 50%; top: 50%; } .window-plus:before { width: 26px; height: 2px; margin: -1px 0 0 -13px; } .window-plus:after { width: 2px; height: 26px; margin: -13px 0 0 -1px; } .stack { width: 54px; height: 36px; position: absolute; top: 50%; left: 50%; margin: -11px 0 0 -27px; } .stack, .stack:before, .stack:after { border: 2px solid black; } .stack:before, .stack:after { border-bottom: 0; } .stack:before { width: 46px; height: 8px; left: 2px; top: -10px; } .stack:after { width: 32px; height: 5px; left: 8px; top: -16px; } .bluethooth { height: 56px; width: 2px; background: black; position: absolute; left: 50%; top: 50%; margin: -28px 0 0 -1px; } .bluethooth:before, .bluethooth:after { width: 20px; height: 20px; left: 2px; border: 2px solid black; border-left: 0; } .bluethooth:before { top: 0px; transform-origin: 0 0; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } .bluethooth:after { bottom: 0; transform-origin: 0 100%; -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); } /* MIXINS */ </style></head><body> <ul> <li><div class="icon arrow-previous"></div></li> <li><div class="icon arrow-right"></div></li> <li><div class="icon arrow-left"></div></li> <li><div class="icon arrow-next"></div></li> <li><div class="icon arrow-bottom"></div></li> <li><div class="icon arrow-top"></div></li> <li><div class="icon smart-phone"></div></li> <li><div class="icon information-button"></div></li> <li><div class="icon speech-bubble"></div></li> <li><div class="icon speech-bubble speech-bubble--no-text"></div></li> <li><div class="icon bullet-list"></div></li> <li><div class="icon scale"></div></li> <li><div class="icon credit-card"></div></li> <li><div class="icon calendar-tick"></div></li> <li><div class="icon outcoming"></div></li> <li><div class="icon clock"></div></li> <li><div class="icon mail"></div></li> <li><div class="icon add"></div></li> <li><div class="icon bookmark"></div></li> <li><div class="icon portfolio"></div></li> <li><div class="icon hierarchy"></div></li> <li><div class="icon converging-arrows"></div></li> <li><div class="icon not-charging"></div></li> <li><div class="icon battery battery--two-bars"></div></li> <li><div class="icon battery battery--three-bars"></div></li> <li><div class="icon battery battery--four-bars"></div></li> <li><div class="icon menu-three-lines"></div></li> <li><div class="icon cross-out-mark"></div></li> <li><div class="icon arrow-refresh"></div></li> <li><div class="icon wrong-sign"></div></li> <li><div class="icon clapper"></div></li> <li><div class="icon tablet-locked"></div></li> <li><div class="icon storage"></div></li> <li><div class="icon card-and-machine"></div></li> <li><div class="icon aim-target"></div></li> <li><div class="icon box"></div></li> <li><div class="icon window-computer"></div></li> <li><div class="icon circle-of-circles"></div></li> <li><div class="icon window-plus"></div></li> <li><div class="icon stack"></div></li> <li><div class="icon bluethooth"></div></li> </ul> </body></html>

Related: See More


Questions / Comments: