Removing font icons

footer.php

@@ -3,7 +3,7 @@
 	<h2><?php yourls_e( 'The bookmarklet', 'isq_translation') ?></h2>
 
 	<?php $bookmarkletdialog = yourls__( 'Save this as a bookmark', 'isq_translation') // Can't put it where it belongs as there'd be too much char escaping ?>
-	<p><?php yourls_e( 'Add this to your bookmarks or drag it to your bookmarks bar to quickly access shortening functions:', 'isq_translation') ?> <a href="javascript:(function()%7Bvar%20d=document,w=window,enc=encodeURIComponent,e=w.getSelection,k=d.getSelection,x=d.selection,s=(e?e():(k)?k():(x?x.createRange().text:0)),s2=((s.toString()=='')?s:enc(s)),f='<?php echo YOURLS_SITE . '/index.php'; ?>',l=d.location,p='?url='+enc(l.href)+'&title='+enc(d.title)+'&keyword='+s2,u=f+p;try%7Bthrow('ozhismygod');%7Dcatch(z)%7Ba=function()%7Bif(!w.open(u))l.href=u;%7D;if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();%7Dvoid(0);%7D)();" onClick="alert('<?php echo $bookmarkletdialog ?>'); return false;" class="bookmarklet"><?php yourls_e( 'Shorten', 'isq_translation') ?></a></p>
+	<p><?php yourls_e( 'Add this to your bookmarks or drag it to your bookmarks bar to quickly access shortening functions:', 'isq_translation') ?> <a href="javascript:(function()%7Bvar%20d=document,w=window,enc=encodeURIComponent,e=w.getSelection,k=d.getSelection,x=d.selection,s=(e?e():(k)?k():(x?x.createRange().text:0)),s2=((s.toString()=='')?s:enc(s)),f='<?php echo YOURLS_SITE . '/index.php'; ?>',l=d.location,p='?url='+enc(l.href)+'&title='+enc(d.title)+'&keyword='+s2,u=f+p;try%7Bthrow('ozhismygod');%7Dcatch(z)%7Ba=function()%7Bif(!w.open(u))l.href=u;%7D;if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();%7Dvoid(0);%7D)();" onClick="alert('<?php echo $bookmarkletdialog ?>'); return false;" class="bookmarklet"><img src="public/images/move.svg" alt="Move icon" class="icon icon-inline" /><?php yourls_e( 'Shorten', 'isq_translation') ?></a></p>
 	<p><?php yourls_e( 'This bookmarklet takes the page URL and title and opens a new tab, where you can fill out a CAPTCHA. If you have selected text before using the bookmarklet, that will be used as the keyword.', 'isq_translation') ?></p>
 	<p><?php yourls_e( 'Support for bookmarklets on mobile varies. For example, they work on Chrome for Android but you have to add and sync them from your desktop.', 'isq_translation') ?></p>
 </div>

public/fonts/icons.svg

@@ -1,11 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
-<svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Generated by IcoMoon</metadata>
-<defs>
-<font id="icons" horiz-adv-x="512">
-<font-face units-per-em="512" ascent="480" descent="-32" />
-<missing-glyph horiz-adv-x="512" />
-<glyph unicode="&#x20;" d="" horiz-adv-x="256" />
-<glyph unicode="&#xe600;" d="M512 221.714q0-7.428-5.428-12.857l-73.143-73.143q-5.428-5.428-12.857-5.428t-12.857 5.428-5.428 12.857v36.572h-109.714v-109.714h36.572q7.428 0 12.857-5.428t5.428-12.857-5.428-12.857l-73.143-73.143q-5.428-5.429-12.857-5.429t-12.857 5.429l-73.143 73.143q-5.428 5.428-5.428 12.857t5.428 12.857 12.857 5.428h36.571v109.714h-109.715v-36.572q0-7.428-5.428-12.857t-12.857-5.428-12.857 5.428l-73.143 73.143q-5.428 5.428-5.428 12.857t5.428 12.857l73.143 73.143q5.428 5.428 12.857 5.428t12.857-5.428 5.428-12.857v-36.571h109.715v109.714h-36.572q-7.428 0-12.857 5.428t-5.429 12.857 5.428 12.857l73.143 73.143q5.429 5.428 12.857 5.428t12.857-5.428l73.143-73.143q5.428-5.429 5.428-12.857t-5.428-12.857-12.857-5.428h-36.572v-109.714h109.714v36.572q0 7.428 5.428 12.857t12.857 5.428 12.857-5.428l73.143-73.143q5.428-5.429 5.428-12.857z" />
-</font></defs></svg>

public/images/move.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<g>
+	<path d="M64,32c0,0.6-0.2,1.2-0.7,1.6l-9.1,9.1c-0.5,0.5-1,0.7-1.6,0.7s-1.2-0.2-1.6-0.7c-0.5-0.5-0.7-1-0.7-1.6v-4.6H36.6v13.7
+		h4.6c0.6,0,1.2,0.2,1.6,0.7c0.5,0.5,0.7,1,0.7,1.6s-0.2,1.2-0.7,1.6l-9.1,9.1c-0.5,0.5-1,0.7-1.6,0.7s-1.2-0.2-1.6-0.7l-9.1-9.1
+		c-0.5-0.5-0.7-1-0.7-1.6s0.2-1.2,0.7-1.6c0.5-0.5,1-0.7,1.6-0.7h4.6V36.6H13.7v4.6c0,0.6-0.2,1.2-0.7,1.6c-0.5,0.5-1,0.7-1.6,0.7
+		c-0.6,0-1.2-0.2-1.6-0.7l-9.1-9.1C0.2,33.2,0,32.6,0,32s0.2-1.2,0.7-1.6l9.1-9.1c0.5-0.5,1-0.7,1.6-0.7c0.6,0,1.2,0.2,1.6,0.7
+		c0.5,0.5,0.7,1,0.7,1.6v4.6h13.7V13.7h-4.6c-0.6,0-1.2-0.2-1.6-0.7c-0.5-0.5-0.7-1-0.7-1.6c0-0.6,0.2-1.2,0.7-1.6l9.1-9.1
+		C30.8,0.2,31.4,0,32,0s1.2,0.2,1.6,0.7l9.1,9.1c0.5,0.5,0.7,1,0.7,1.6c0,0.6-0.2,1.2-0.7,1.6c-0.5,0.5-1,0.7-1.6,0.7h-4.6v13.7
+		h13.7v-4.6c0-0.6,0.2-1.2,0.7-1.6c0.5-0.5,1-0.7,1.6-0.7s1.2,0.2,1.6,0.7l9.1,9.1C63.8,30.8,64,31.4,64,32z"/>
+</g>
+</svg>

public/style.css

@@ -26,31 +26,17 @@ body {
 	color: #FFF;
 }
 
-@font-face {
-	font-family: 'icons';
-	src:url('fonts/icons.woff') format('woff'),
-		url('fonts/icons.ttf') format('truetype'),
-		url('fonts/icons.svg#icons') format('svg');
-	font-weight: normal;
-	font-style: normal;
-}
-
-[class^="icon-"], [class*=" icon-"] {
-	font-family: 'icons';
-	speak: none;
-	font-style: normal;
-	font-weight: normal;
-	font-variant: normal;
-	text-transform: none;
-	line-height: 1;
-	/* Better font rendering */
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
+.icon-inline {
+	vertical-align: top;
+	height: 1.2rem;
+	width: 1.2rem;
+	padding: 0 2px;
 }
 
 /* Structure and global design */
 a, a:visited {
 	color: #013F6D;
+	fill: #013F6D;
 	text-decoration: none;
 }
 
@@ -177,12 +163,6 @@ svg#url-qr-code {
 }
 
 /* Footer */
-.bookmarklet:before {
-	font-family: 'icons';
-	content: "\e600";
-	margin: 2px;
-}
-
 .footer {
 	text-align: center;
 	border-top: 2px solid #000;