CodePen

HTML

            
              <div class="cart">
  <!-- data-icon="&#x21;" -->
  <svg viewBox="0 0 512 512"><path/></svg>
  <span id="item-counter"></span>
</div>

<div class="center">
  <button class="add">Add</button>
  <button class="remove">Remove</button>
</div>

<div id="instructions">
  
  <h1>Using with IcoMoon</h1>
  
  <p><a href="http://icomoon.io/" target="_blank">IcoMoon</a> is awesome and so very simple to use. Basically, you start off at the <a href="http://icomoon.io/app/" target="_blank">IcoMoon App</a>, select your icons, and download your customized icon fonts. To recreate this shopping cart design you can remove the SVG tags and follow the following code.</p>
  
  <h2 class="html">HTML:</h2>
  
  <pre class="language-markup"><code class="language-markup">&lt;div class="cart" data-icon="&amp;#x21;"&gt;
    &lt;span id="item-counter"&gt;&lt;/span&gt;
&lt;/div&gt;</code></pre>
  <h2>CSS:</h2>
  <pre class="language-css"><code class="language-css">* {
	margin:0;
	padding:0;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing:padding-box;
	   -moz-box-sizing: border-box;
			  box-sizing: border-box;
}

*:after {
	content: '';
	display: table;
	clear: both;
}

@font-face {
	font-family: 'icomoon';
	src: url('../fonts/icomoon.eot');
	src: url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/icomoon.woff') format('woff'),
		 url('../fonts/icomoon.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	@font-face {
		font-family: 'icomoon';
		src: url('../fonts/icomoon.svg#icomoon') format('svg');
		font-weight: normal;
		font-style: normal;
	}
}

html {
	background:url('../images/texture.png') repeat;
}

div.cart[data-icon]:before {
	speak: none;
	color: #D4D4D4;
	font-size: 2.5em;
	line-height: 2.2;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	font-family: 'icomoon';
	content: attr(data-icon);
	text-shadow: 1px 1px 0px #555;
	text-shadow: 1px 1px 0 rgba(0,0,0,1),
				    1px 1px 3px #5F8A8A;
}

div.cart {
	margin:50px auto;
	width: 100px;
	height: 100px;
	cursor: pointer;
	border-radius: 50%;
	position: relative;
	text-align: center;
	background: rgba(0,0,0,0.3);
	border: 6px solid rgba(45,45,45,0.8);
	box-shadow: inset 0 0 2px rgba(45,45,45,0.98),
				   0 0 2px rgba(45,45,45,0.98),0 8px 6px -6px #080707;
	-webkit-transition:-webkit-transform 200ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
	-webkit-transition:-webkit-transform 200ms cubic-bezier(0.175, 0.885, 0.320, 1);
	-moz-transition: -moz-transform 200ms cubic-bezier(0.175, 0.885, 0.320, 1.275); 
	-ms-transition: -ms-transform 200ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
	-o-transition: -o-transform 200ms cubic-bezier(0.175, 0.885, 0.320, 1.275); 
	transition: transform 200ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
div.cart:hover {
	-webkit-transform: scale(1.106);
	-moz-transform: scale(1.106);
	transform: scale(1.106);
}
span#item-counter {
	top: 0;
	right: 0;
	width: 24px;
	height: 24px;
	display: none;
	color: #ffffe8;
	border-radius: 50%;
	position: absolute;
	text-shadow: 1px 1px 0 #1c1c1c;
	font: 300 normal 0.8em/1.8 'Roboto Slab';
	-webkit-box-shadow: 0 0 0 1px rgba(22,22,22,0.8);
			  box-shadow: 0 0 0 1px rgba(22,22,22,0.8);
	background: #c80724;
	background: -webkit-linear-gradient(135deg, #c80724 0%, #bf011b 50%, #9f0118 100%);
	background: -moz-linear-gradient(135deg, #c80724 0%, #bf011b 50%, #9f0118 100%);
	background: -o-linear-gradient(135deg, #c80724 0%, #bf011b 50%, #9f0118 100%);
	background: linear-gradient(135deg, #c80724 0%, #bf011b 50%, #9f0118 100%);
}
span#item-counter:before {
	top: 20px;
	width: 0px;
	height: 0px;
	right: 16px;
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 8px 6px 0 0;
	-webkit-transform: rotate(24deg);
	   -moz-transform: rotate(24deg);
			  transform: rotate(24deg);
	border-color: #bf011b transparent transparent transparent;
}
.spin {
	-webkit-animation: spin 300ms 1 linear;
	   -moz-animation: spin 300ms 1 linear;
		  -o-animation: spin 300ms 1 linear;
			  animation: spin 300ms 1 linear;
}

@-webkit-keyframes spin {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes spin {
	from { -moz-transform: rotate(0deg); }
	to { -moz-transform: rotate(360deg); }
}

@-o-keyframes spin {
	from { -o-transform: rotate(0deg); }
	to { -o-transform: rotate(360deg); }
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}</code></pre>
  
  <h2>JQUERY:</h2>
  <pre class="language-javascript"><code class="language-javascript">$.wait = function (duration) {
	return $.Deferred(function (def) {
		setTimeout(def.resolve, duration);
	});
};

var $bubble = $('span#item-counter'),
	 c = 0;

$('button.add').click(function (e) {
	c++;
	$bubble.fadeIn(200, function () {
		$(this).html(c);
	});
	if (c >= 100) {
		$bubble.css({
			'font-size': '0.6em',
			'line-height': '2.5'
		});
	} else if (c >= 25) {
		$bubble.css('color', '#ffffe8');
	} else if (c < 10) {
		$bubble.css('font-weight', '400');
	} else {
		$bubble.css('font-weight', '300');
	}
});

$('button.remove').click(function (e) {
	if (c <= 1) {
		e.preventDefault();
		c = 0;
		$bubble.fadeOut(200);
	} else {
		c -= 1;
		$bubble.html(c);
	}
});

$('div.cart').click(function () {
	function spinRemoval() {
		if ($('div.cart').hasClass('spin')) {
			$('div.cart').removeClass('spin');
			$bubble.fadeOut(200);
		}
	}
	$(this).addClass('spin');
	$.wait(300).then(spinRemoval);
});</code></pre>
  <p>If you want to play around with this code locally, i have included a zip file for you guys/gals to download. Didn't really see the need to throw this up on my <a href="https://github.com/johnmotyljr" target="_blank">GitHub</a>. If you feel that you could make this better feel free to fork this pen or play around with the downloaded files.</p>
  <div>
    <a id="download" href="http://johnmotyljr.com/codepen/shopping-cart-icon/demo.zip">Download</a>
  </div>
  <p>If your download doesn't work, just copy the link and paste in your browser: <em>http://johnmotyljr.com/codepen/shopping-cart-icon/demo.zip</em></p>
</div>

<a id="dll" href="#download"><em>D</em>ownload <em>S</em>rc <em>F</em>iles</a>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              @import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,300|Oswald:300);

* {
	-webkit-box-sizing: border-box;
	  -moz-box-sizing: padding-box;
	   -moz-box-sizing: border-box;
			    box-sizing: border-box;
}

html {
 background:url('http://johnmotyljr.com/codepen/prism/texture-bg.png') repeat;
}

div.cart {
	width: 100px;
	height: 100px;
	cursor: pointer;
  margin: 25px auto;
	border-radius: 50%;
	position: relative;
	text-align: center;
	background: rgba(0,0,0,0.3);
	border: 6px solid rgba(45,45,45,0.8);
	box-shadow: inset 0 0 2px rgba(45,45,45,0.98),
                    0 0 2px rgba(45,45,45,0.98),
                    0 8px 6px -6px rgba(8,7,7,1);
  /* CodePen cannot handle this CubicBezier so it flickers with this
  
  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
  -moz-transition: -moz-transform 200ms cubic-bezier(0.175, 0.885, 0.320, 1.275); 
  -o-transition: -o-transform 200ms cubic-bezier(0.175, 0.885, 0.320, 1.275); 
  transition: transform 200ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
  
  */
	   -webkit-transition: -moz-transform 200ms ease-in-out;
	      -moz-transition: -moz-transform 200ms ease-in-out;
	          -o-transition: -o-transform 200ms ease-in-out; 
	                transition: transform 200ms ease-in-out;
}

div.cart:hover {
	-webkit-transform:scale(1.06);
	   -moz-transform:scale(1.06);
			    transform:scale(1.06);
}

span#item-counter {
	top:0;
	right:0;
	width:24px;
	height:24px;
	display:none;
	color:#ffffe8;
	border-radius:50%;
	position:absolute;
	background: #c80724;
	text-shadow:1px 1px 0 #1c1c1c;
	font:300 normal 0.8em/1.8 'Roboto Slab';
	-webkit-box-shadow:0 0 0 1px rgba(22,22,22,0.8);
          box-shadow:0 0 0 1px rgba(22,22,22,0.8);
	background: -webkit-linear-gradient(-45deg, #c80724 0%, #bf011b 50%, #9f0118 100%);
	background: 	 -moz-linear-gradient(-45deg, #c80724 0%, #bf011b 50%, #9f0118 100%);
	background: 		 -o-linear-gradient(-45deg, #c80724 0%, #bf011b 50%, #9f0118 100%);
	background: 				linear-gradient(-45deg, #c80724 0%, #bf011b 50%, #9f0118 100%);
}
span#item-counter:before {
	top:20px;
	width:0px;
	height:0px;
	right:16px;
	content:'';
	position:absolute;
	border-style:solid;
	border-width:8px 6px 0 0;
	-webkit-transform:rotate(24deg);
	   -moz-transform:rotate(24deg);
			    transform:rotate(24deg);
	border-color: #bf011b transparent transparent transparent;
}

.spin {
	-webkit-animation:spin 300ms 1 linear;
	   -moz-animation:spin 300ms 1 linear;
		   -o-animation:spin 300ms 1 linear;
			    animation:spin 300ms 1 linear;
}
@-webkit-keyframes spin {
	from { -webkit-transform:rotate(0deg); }
	to { -webkit-transform:rotate(360deg); }
}
@-moz-keyframes spin {
	from { -moz-transform:rotate(0deg); }
	to { -moz-transform:rotate(360deg); }
}
@-o-keyframes spin {
	from { -o-transform:rotate(0deg); }
	to { -o-transform:rotate(360deg); }
}
@keyframes spin {
	from { transform:rotate(0deg); }
	to { transform:rotate(360deg); }
}

.center {
  margin:0 auto;
  width:184px;
}

.center button {
  outline:0;
  width:80px;
  height:30px;
	color: #f9f9f9;
  cursor:pointer;
  padding:2px 6px;
  border-radius:4px;
  letter-spacing:1px;
  text-transform:uppercase;
  text-shadow:1px 1px 1px #333;
  font:300 normal 12px/1 'Oswald', sans-serif;
  box-shadow:0 8px 6px -6px hsla(0,0%,0%,1);
  
}
button.add {
	background: #1B6DE0;
	border: 1px solid #072B5E;
	background: -webkit-linear-gradient(-45deg, #1d5ae0 0%, #1b6de0 100%);
	background: -moz-linear-gradient(-45deg, #1d5ae0 0%, #1b6de0 100%);
	background: -o-linear-gradient(-45deg, #1d5ae0 0%, #1b6de0 100%);
	background: linear-gradient(-45deg, #1d5ae0 0%, #1b6de0 100%);
}
button.add:hover {
  background:#307BE3;
}
button.add:active {
	background: #0050BF;
}
button.remove {
	background: #E01B3C;
	border: 1px solid #C90627;
	background: -webkit-linear-gradient(-45deg, #f41f23 0%, #e01b3c 100%);
	background:	-moz-linear-gradient(-45deg, #f41f23 0%, #e01b3c 100%);
	background:	-o-linear-gradient(-45deg, #f41f23 0%, #e01b3c 100%);
	background:	linear-gradient(-45deg, #f41f23 0%, #e01b3c 100%);
}
button.remove:hover {
	background: #EB3B58;
}
button.remove:active {
	background: #C90627;
}

/* Styles for instructions */

#instructions {
  width: 60%;
  height: 100%;
  padding: 12px;
  margin: 50px auto;
  border-radius: 6px;
  border: 1px solid #000;
  box-shadow:0 8px 6px -6px hsla(0,0%,0%,1);
  background: #f5f9f0;
  background: -webkit-linear-gradient(45deg, #f5f9f0 0%, #f9fcf7 100%);
  background: -moz-linear-gradient(45deg, #f5f9f0 0%, #f9fcf7 100%);
  background: -o-linear-gradient(45deg, #f5f9f0 0%, #f9fcf7 100%);
  background: linear-gradient(45deg, #f5f9f0 0%, #f9fcf7 100%);
}

#instructions h1 {
  color:#333;
  letter-spacing:1px;
  font:300 normal 1.8em/1 'Oswald', sans-serif;
}

#instructions h2 {
  color: #333;
  margin: 12px 0;
  position: relative;
  padding: 12px 42px;
  letter-spacing: 1px;
  font: 300 normal 1.4em/1 'Oswald', sans-serif;
}
h2:before {
  content: '';
  left: 8px;
  top: 12px;
  width: 28px;
  height: 28px;
  position: absolute;
}
h2:nth-of-type(1):before {
  background:url("http://www.w3.org/html/logo/downloads/HTML5_Badge_32.png") no-repeat;
  background-size:cover;
}
h2:nth-of-type(2):before {
  background:url("http://josephmainwaring.com/scenic/wp-content/uploads/logo-css3-32.png") no-repeat;
  background-size:cover;
}
h2:nth-of-type(3):before {
  background:url("http://www.snaver.net/wp-content/uploads/2010/08/jquery-logo.png") no-repeat;
  background-size:cover;
}

#instructions p {
  margin:24px 0;
  letter-spacing:1px;
  font:300 normal 1.2em/1.3 'Oswald', sans-serif;
}

#instructions p a {
  color:#E05D1B;
  text-decoration: none;
  border-bottom:1px dotted #333;
  -webkit-transition: color 200ms ease-in-out;
     -moz-transition: color 200ms ease-in-out;
          transition: color 200ms ease-in-out;
}

#instructions p a:hover {
  color: #000;
  border-color: #E05D1B;
}

#instructions pre {
  width: 98%;
  margin:0 auto;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

#instructions div a {
  color:#333;
  text-decoration:none;
  height:40px;
  width:100%;
  text-align:center;
  background: #FC7B3A;
  margin:12px 0;
  display:block;
  border-radius:4px;
  letter-spacing:1px;
  text-transform:uppercase;
  text-shadow:0 1px #E05D1B;
  font:300 normal 1em/2.5 'Oswald', sans-serif;
  box-shadow:0 8px 6px -6px hsla(0,0%,0%,0.25);
  -webkit-transition:background 200ms ease-in-out;
     -moz-transition:background 200ms ease-in-out;
          transition:background 200ms ease-in-out;
}
#instructions div a:hover {
  background: #E05D1B;
}


#dll {
  top: 0;
  color: #333;
  height: 60px;
  width: 200px;
  display: none;
  border-radius:0 0 4px 4px;
  text-align: center;
  position: absolute;
  background: #FC7B3A;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 1px rgba(255,255,255,0.3);
  font: 300 normal 1.4em/2.2 'Oswald', sans-serif;
  -webkit-transition:background 200ms ease-in-out;
     -moz-transition:background 200ms ease-in-out;
          transition:background 200ms ease-in-out;
}
#dll:hover {
  background: #E05D1B;
}

#dll em {
  color: #f5f5f5;
  font-size: 110%;
  text-shadow: 0 1px #000;
  border-bottom: 1px dotted #333;
}

p em {
  border-radius:4px;
  padding:2px 6px;
  background:#D4D4D4;
  border:1px dotted #444;
  display:block;
  margin-top:24px;
}

@media all and (max-width:798px) {
  code[class*="language-"], pre[class*="language-"] {
    font-size:0.8em;
  }
}

@media all and (max-width:920px) {
  #dll {
    visibility:hidden;
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $.wait = function (duration) {
    return $.Deferred(function (def) {
        setTimeout(def.resolve, duration);
    });
};

var $bubble = $('span#item-counter');
var c = 0;

$('button.add').click(function (e) {
    c++;
    $bubble.fadeIn(200, function () {
        $(this).html(c);
    });
    if (c >= 100) {
        $bubble.css({
            'font-size': '0.6em',
                'line-height': '2.5'
        });
    } else if (c >= 25) {
        $bubble.css('color', '#ffffe8');
    } else if (c < 10) {
        $bubble.css('font-weight', '400');
    } else {
        $bubble.css('font-weight', '300');
    }
});

$('button.remove').click(function (e) {
    if (c <= 1) {
        e.preventDefault();
        c = 0;
        $bubble.fadeOut(200);
    } else {
        c -= 1;
        $bubble.html(c);
    }
});

$('div.cart').click(function () {
    function spinRemoval() {
        if ($('div.cart').hasClass('spin')) {
            $('div.cart').removeClass('spin');
            $bubble.fadeOut(200);
        }
    }
    $(this).addClass('spin');
    $.wait(300).then(spinRemoval);
});

$(function() {
  var ww = $(window).width();
  var iw = $('#instructions').width();
  var a = (ww - iw) / 2;
  $('#dll').css('left',a + 'px');
  $('#dll').slideDown(400);
  
  $(window).resize(function() {
    var w = $(window).width();
    var i = $('#instructions').width();
    var a = (w - i) / 2;
    $('#dll').css('left',a + 'px');    
  });
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................