Comment Likes: Remove the dependency on Noticons (#14784)

Currently the Noticons font is loaded solely for the purpose
of displaying the "like" star from the Noticons icon set. This
adds 20 kB to the total page load size when only comment likes
are enabled.

This commit replaces the icon character by an inline SVG used
on WPCOM.

Author: dero

modules/likes/style.css

@@ -2,11 +2,6 @@
  * Like Button toolbar button, loading text & container styles
  */
 
-@font-face {
-	font-family: Noticons;
-	src: url(https://wordpress.com/i/noticons/Noticons.woff);
-}
-
 /* Master container */
 #jp-post-flair {
 	padding-top: .5em;
@@ -163,19 +158,20 @@ div.sd-box {
 	position: absolute;
 	display: flex;
 	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-	margin-top: 4px;
 }
 
 .comment-likes-widget-placeholder::before {
-	-webkit-font-smoothing: antialiased;
-	font-family: "Noticons";
-	font-size: 20px;
-	line-height: .9;
-	color: #5CB5D4;
-	content: '\f408';
+	color: #2EA2CC;
 	width: 16px;
+	height: 16px;
+	content: '';
 	display: inline-block;
-	vertical-align: middle;
+	position: relative;
+	top: 3px;
+	padding-right: 5px;
+	background-repeat: no-repeat;
+	background-size: 16px 16px;
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='0' fill='none' width='24' height='24'/%3E%3Cg%3E%3Cpath fill='%232EA2CC' d='M12 2l2.582 6.953L22 9.257l-5.822 4.602L18.18 21 12 16.89 5.82 21l2.002-7.14L2 9.256l7.418-.304'/%3E%3C/g%3E%3C/svg%3E");
 }
 
 .post-likes-widget-placeholder .button {
@@ -193,7 +189,7 @@ div.sd-box {
 
 .comment-likes-widget-placeholder .loading {
 	padding-left: 5px;
-	margin-top: 2px;
+	margin-top: 4px;
 	align-self: center;
 	color: #4E4E4E;
 }