Fixes #56

src/client/ui/templates/equipment/equipment.js

@@ -90,10 +90,11 @@ define([
 
 			this.find('[slot]')
 				.removeData('item')
-				.addClass('empty')
+				.addClass('empty show-default-icon')
 				.find('.icon')
 					.off()
-					.css('background', '')
+					.css('background-image', '')
+					.css('background-position', '')
 					.on('click', this.buildSlot.bind(this));
 
 			items
@@ -121,7 +122,7 @@ define([
 					var elSlot = this.find('[slot="' + slot + '"]');
 					elSlot
 						.data('item', item)
-						.removeClass('empty')
+						.removeClass('empty show-default-icon')
 						.find('.icon')
 							.css('background', 'url("' + spritesheet + '") ' + imgX + 'px ' + imgY + 'px')
 							.off()

src/client/ui/templates/equipment/styles.less

@@ -77,6 +77,25 @@
 					margin-bottom: 0px;
 				}
 
+				&.show-default-icon {
+					.icon {
+						opacity: 0.5;
+						background-image: url('../../../images/uiIcons.png') !important;
+					}
+
+					&[slot="head"] 		.icon { background-position: -0px -448px; }
+					&[slot="neck"] 		.icon { background-position: -64px -448px; }
+					&[slot="chest"] 	.icon { background-position: -128px -448px; }
+					&[slot="hands"] 	.icon { background-position: -192px -448px; }
+					&[slot="finger"] 	.icon { background-position: -256px -448px; }
+					&[slot="waist"] 	.icon { background-position: -320px -448px; }
+					&[slot="legs"] 		.icon { background-position: -384px -448px; }
+					&[slot="feet"] 		.icon { background-position: -448px -448px; }
+					&[slot="trinket"] 	.icon { background-position: -448px -384px; }
+					&[slot="twoHanded"] .icon { background-position: -384px -384px; }
+					&[slot^="rune"] 	.icon { background-position: -320px -384px; }
+				}
+
 				.icon {
 					height: 100%;
 				}