Replaced graphics with font on orders / products

admin/post-types/product.php

@@ -76,8 +76,8 @@ function woocommerce_edit_product_columns($columns){
 	
 	$columns["product_cat"] = __("Categories", 'woocommerce');
 	$columns["product_tag"] = __("Tags", 'woocommerce');
-	$columns["featured"] = '<img src="' . $woocommerce->plugin_url() . '/assets/images/featured_head.png" alt="' . __("Featured", 'woocommerce') . '" class="tips" data-tip="' . __("Featured", 'woocommerce') . '" />';
+	$columns["featured"] = '<span class="icon"></span><span class="hide">' . __("Featured", 'woocommerce') . '</span>';
-	$columns["product_type"] = '<img src="' . $woocommerce->plugin_url() . '/assets/images/product_type_head.png" alt="' . __("Type", 'woocommerce') . '" class="tips" data-tip="' . __("Type", 'woocommerce') . '" />';
+	$columns["product_type"] = '<span class="icon"></span><span class="hide">' . __("Product Type", 'woocommerce') . '</span>';	
 	$columns["date"] = __("Date", 'woocommerce');
 	
 	return $columns;
@@ -220,8 +220,8 @@ function woocommerce_custom_product_columns( $column ) {
 		case "featured" :
 			$url = wp_nonce_url( admin_url('admin-ajax.php?action=woocommerce-feature-product&product_id=' . $post->ID), 'woocommerce-feature-product' );
 			echo '<a href="'.$url.'" title="'.__('Change', 'woocommerce') .'">';
-			if ($product->is_featured()) echo '<a href="'.$url.'"><img src="'.$woocommerce->plugin_url().'/assets/images/featured.png" alt="yes" />';
+			if ($product->is_featured()) echo '<a href="'.$url.'"><span class="icon featured"></span><span class="hide">Featured</span>';
-			else echo '<img src="'.$woocommerce->plugin_url().'/assets/images/featured-off.png" alt="no" />';
+			else echo '<span class="icon not-featured"></span><span class="hide">Not featured</span>';
 			echo '</a>';
 		break;
 		case "is_in_stock" :

admin/post-types/shop_order.php

@@ -36,8 +36,8 @@ function woocommerce_edit_order_columns($columns){
 	$columns["billing_address"] = __("Billing", 'woocommerce');
 	$columns["shipping_address"] = __("Shipping", 'woocommerce');
 	$columns["total_cost"] = __("Order Total", 'woocommerce');
-	$columns["order_comments"] = '<img alt="' . esc_attr__( 'Order Notes', 'woocommerce' ) . '" src="' . esc_url( admin_url( 'images/comment-grey-bubble.png' ) ) . '" class="tips" data-tip="' . __("Order Notes", 'woocommerce') . '" />';
+	$columns["order_comments"] = '<span class="icon tips" data-tip="' . __("Order Notes", 'woocommerce') . '"></span><span class="hide">' . __("Order Notes", 'woocommerce') . '</span>';
-	$columns["note"] = '<img src="' . $woocommerce->plugin_url() . '/assets/images/note_head.png" alt="' . __("Customer Notes", 'woocommerce') . '" class="tips" data-tip="' . __("Customer Notes", 'woocommerce') . '" />';
+	$columns["note"] = '<span class="icon tips" data-tip="' . __("Customer Notes", 'woocommerce') . '"></span><span class="hide">' . __("Customer Notes", 'woocommerce') . '</span>';
 	$columns["order_date"] = __("Date", 'woocommerce');
 	$columns["order_actions"] = __("Actions", 'woocommerce');
 
@@ -172,9 +172,9 @@ function woocommerce_custom_order_columns($column) {
 		case "note" :
 
 			if ($order->customer_note)
-				echo '<img src="'.$woocommerce->plugin_url().'/assets/images/note.png" alt="yes" class="tips" data-tip="'. __('Yes', 'woocommerce') .'" />';
+				echo '<span class="icon yes tips" data-tip="'. __('Yes', 'woocommerce') .'"></span><span class="hide">'. __('Yes', 'woocommerce') .'</span>';
 			else
-				echo '<img src="'.$woocommerce->plugin_url().'/assets/images/note-off.png" alt="no" class="tips" data-tip="'. __('No', 'woocommerce') .'" />';
+				echo '<span class="icon no tips" data-tip="'. __('No', 'woocommerce') .'"></span><span class="hide">'. __('No', 'woocommerce') .'</span>';
 
 		break;
 		case "order_comments" :

assets/css/admin.less

@@ -888,6 +888,20 @@ table.wp-list-table {
 		text-align: center;
 		white-space: nowrap
 	}
+	span.hide {
+		display: none;
+	}
+	span.icon {
+		position: relative;
+		&:before {
+			font-family: FontAwesome;
+			font-weight: normal;
+			font-style: normal;
+			display: inline-block;
+			text-decoration: inherit;
+			font-size: 1.3em;
+		}
+	}
 	.column-product_cat, .column-product_tag {
 		width: 11% !important;
 	}
@@ -898,6 +912,19 @@ table.wp-list-table {
 		width: 46px;
 		text-align: left !important;
 	}
+	.column-featured {
+		span.icon:before {
+			content: "\f005";
+		}
+		span.icon.not-featured:before {
+			content: "\f006";
+		}
+	}
+	.column-product_type {
+		span.icon:before {
+			content: "\f07a";
+		}
+	}
 	.column-note {
 		width: 46px;
 		text-align: center;
@@ -908,10 +935,30 @@ table.wp-list-table {
 	}
 	.column-order_comments {
 		width: 3em !important;
+		span.icon {
+			&:before {
+				content: "\f075";
+			}
+		}
 		.post-com-count {
 			float: left;
 		}
 	}
+	.column-note {
+		span.icon {
+			&:before {
+				content: "\f016";
+			}
+		}
+		span.icon.no:before {
+			zoom:1;
+			-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+			filter: alpha(opacity=50);
+			-moz-opacity:0.5;			
+			-khtml-opacity: 0.5;
+			opacity: 0.5;
+		}
+	}
 	th.column-note, th.column-order_comments {
 		img {
 			padding-top: 1px !important;
@@ -942,21 +989,39 @@ table.wp-list-table {
 		height: 16px;
 		margin: 1px 2px;
 		display: block;
-		background:url(../images/product_types.png) no-repeat -16px 0;
+		&:before {
+			font-family: FontAwesome;
+			font-weight: normal;
+			font-style: normal;
+			display: inline-block;
+			text-decoration: inherit;
+			content: "\f016";
+			font-size:1.3em;
+		}
 		&.grouped {
-			background:url(../images/product_types.png) no-repeat 0 0;
+			&:before {
+				content: "\f0e8";
+			}
 		}
 		&.external {
-			background:url(../images/product_types.png) no-repeat -32px 0;
+			&:before {
+				content: "\f08e";
+			}
 		}
 		&.variable {
-			background:url(../images/product_types.png) no-repeat -48px 0;
+			&:before {
+				content: "\f0c5";
+			}
 		}
 		&.downloadable {
-			background:url(../images/product_types.png) no-repeat -64px 0;
+			&:before {
+				content: "\f019";
+			}
 		}
 		&.virtual {
-			background:url(../images/product_types.png) no-repeat -80px 0;
+			&:before {
+				content: "\f0c2";
+			}
 		}
 	}
 	mark.instock {

readme.txt

@@ -171,7 +171,7 @@ Yes you can! Join in on our [GitHub repository](http://github.com/woothemes/wooc
 * Tweak - Added generate_title_html() to settings API
 * Tweak - PayPal standard: No longer using shipping_1 because a) paypal ignore it if *any* shipping rules are within paypal, b) paypal ignore anyhing over 5 digits, so 999.99 is the max
 * Tweak - Optimised dashboard icons for retina displays
-* Tweak - Using a font for tab icons
+* Tweak - Graphic icons replaced with a font for scalability
 * Fix - Removed session_name from 1.6 to prevent issues when other plugins start a session first. Instead, added a KB article on how to do it manually (if needed, this is an edge case) - http://wcdocs.woothemes.com/codex/extending/multiple-installs-on-one-domain-sessions-conflictsession-sharing-workaround/
 * Fix - Product categories shortcode loop
 * Fix - selected state for variation options