Move fonts to h:static/fonts

Drop the icomoon directory, saving only selection.json. The rest is not
needed, and is regenerated from the .json by the icomoon app.

Drop the font icon declarations in base.scss and use the css generated
by icomoon.

Move everything to h:static/fonts.

The icomoon css is not in styles because it has "fonts" as a relative
url, and we want "../fonts".

h/static/images/icomoon/Read Me.txt

-Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
-
-You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
-
-You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu > Manage Projects) to retrieve your icon selection.

h/static/images/icomoon/demo-files/demo.css

-body {
-	padding: 0;
-	margin: 0;
-	font-family: sans-serif;
-	font-size: 1em;
-	line-height: 1.5;
-	color: #555;
-	background: #fff;
-}
-h1 {
-	font-size: 1.5em;
-	font-weight: normal;
-}
-small {
-	font-size: .66666667em;
-}
-a {
-	color: #e74c3c;
-	text-decoration: none;
-}
-a:hover, a:focus {
-	box-shadow: 0 1px #e74c3c;
-}
-.bshadow0, input {
-	box-shadow: inset 0 -2px #e7e7e7;
-}
-input:hover {
-	box-shadow: inset 0 -2px #ccc;
-}
-input, fieldset {
-	font-size: 1em;
-	margin: 0;
-	padding: 0;
-	border: 0;
-}
-input {
-	color: inherit;
-	line-height: 1.5;
-	height: 1.5em;
-	padding: .25em 0;
-}
-input:focus {
-	outline: none;
-	box-shadow: inset 0 -2px #449fdb;
-}
-.glyph {
-	font-size: 16px;
-	width: 15em;
-	padding-bottom: 1em;
-	margin-right: 4em;
-	margin-bottom: 1em;
-	float: left;
-	overflow: hidden;
-}
-.liga {
-	width: 80%;
-	width: calc(100% - 2.5em);
-}
-.talign-right {
-	text-align: right;
-}
-.talign-center {
-	text-align: center;
-}
-.bgc1 {
-	background: #f1f1f1;
-}
-.fgc1 {
-	color: #999;
-}
-.fgc0 {
-	color: #000;
-}
-p {
-	margin-top: 1em;
-	margin-bottom: 1em;
-}
-.mvm {
-	margin-top: .75em;
-	margin-bottom: .75em;
-}
-.mtn {
-	margin-top: 0;
-}
-.mtl, .mal {
-	margin-top: 1.5em;
-}
-.mbl, .mal {
-	margin-bottom: 1.5em;
-}
-.mal, .mhl {
-	margin-left: 1.5em;
-	margin-right: 1.5em;
-}
-.mhmm {
-	margin-left: 1em;
-	margin-right: 1em;
-}
-.mls {
-	margin-left: .25em;
-}
-.ptl {
-	padding-top: 1.5em;
-}
-.pbs, .pvs {
-	padding-bottom: .25em;
-}
-.pvs, .pts {
-	padding-top: .25em;
-}
-.clearfix {
-	zoom: 1;
-}
-.unit {
-	float: left;
-}
-.unitRight {
-	float: right;
-}
-.size1of2 {
-	width: 50%;
-}
-.size1of1 {
-	width: 100%;
-}
-.clearfix:before, .clearfix:after {
-	content: " ";
-	display: table;
-}
-.clearfix:after {
-	clear: both;
-}
-.noLiga-true {
-	display: none;
-}
-.textbox0 {
-	width: 3em;
-	background: #f1f1f1;
-	padding: .25em .5em;
-	line-height: 1.5;
-	height: 1.5em;
-}
-#testDrive {
-	padding-top: 24px;
-}
-.fs0 {
-	font-size: 16px;
-}
-.fs1 {
-	font-size: 32px;
-}
-.fs2 {
-	font-size: 32px;
-}

h/static/images/icomoon/demo-files/demo.js

-if (!('boxShadow' in document.body.style)) {
-	document.body.setAttribute('class', 'noBoxShadow');
-}
-
-document.body.addEventListener("click", function(e) {
-	var target = e.target;
-	if (target.tagName === "INPUT" &&
-		target.getAttribute('class').indexOf('liga') === -1) {
-		target.select();
-	}
-});
-
-(function() {
-	var fontSize = document.getElementById('fontSize'),
-		testDrive = document.getElementById('testDrive'),
-		testText = document.getElementById('testText');
-	function updateTest() {
-		testDrive.innerHTML = testText.value || String.fromCharCode(160);
-		if (window.icomoonLiga) {
-			window.icomoonLiga(testDrive);
-		}
-	}
-	function updateSize() {
-		testDrive.style.fontSize = fontSize.value + 'px';
-	}
-	fontSize.addEventListener('change', updateSize, false);
-	testText.addEventListener('input', updateTest, false);
-	testText.addEventListener('change', updateTest, false);
-	updateSize();
-}());

h/static/scripts/plugin/toolbar.coffee

@@ -12,7 +12,7 @@ class Annotator.Plugin.Toolbar extends Annotator.Plugin
   options:
     items: [
       "title": "Toggle Sidebar"
-      "class": "tri-icon"
+      "class": "icon-comment"
       "click": (event) ->
         event.preventDefault()
         event.stopPropagation()
@@ -23,7 +23,7 @@ class Annotator.Plugin.Toolbar extends Annotator.Plugin
           window.annotator.hideFrame()
     ,
       "title": "Show Annotations"
-      "class": "alwaysonhighlights-icon"
+      "class": "icon-visible"
       "click": (event) ->
         event.preventDefault()
         event.stopPropagation()
@@ -31,7 +31,7 @@ class Annotator.Plugin.Toolbar extends Annotator.Plugin
         window.annotator.setVisibleHighlights state
     ,
       "title": "Highlighting Mode"
-      "class": "highlighter-icon"
+      "class": "icon-highlighter2"
       "click": (event) ->
         event.preventDefault()
         event.stopPropagation()
@@ -40,7 +40,7 @@ class Annotator.Plugin.Toolbar extends Annotator.Plugin
         window.annotator.setTool tool
     ,
       "title": "New Comment"
-      "class": "commenter-icon"
+      "class": "icon-plus"
       "click": (event) ->
         event.preventDefault()
         event.stopPropagation()

h/static/styles/base.scss

 @import 'compass/css3';
 
+
 $white: #fff !default;
 $black: #000 !default;
 
@@ -53,18 +54,6 @@ $headingsFontFamily:    inherit !default;
 $headingsFontWeight:    bold !default;
 $headingsColor:         inherit !default;
 
-//ICON FONT IMPORT
-@font-face {
-  font-family: 'icomoon';
-  src:url('../images/icomoon/fonts/h.eot');
-  src:url('../images/icomoon/fonts/h.eot?#iefix') format('embedded-opentype'),
-    url('../images/icomoon/fonts/h.svg#icomoon') format('svg'),
-    url('../images/icomoon/fonts/h.woff') format('woff'),
-    url('../images/icomoon/fonts/h.ttf') format('truetype');
-  font-weight: normal;
-  font-style: normal;
-}
-
 //STANCE COLORS
 $positive: #3aab39;
 $negative: #d11c2b;
@@ -167,41 +156,6 @@ $input-border-radius: 2px;
   background-image: url("../images/#{$icon}");
 }
 
-
-//FONTICON////////////////////////////////
-@mixin fonticon($char, $iconside, $offset: .5em) {
-  text-decoration: none;
-  cursor: pointer;
-  &:hover {
-    opacity: 1;
-  }
-  @if $iconside == left {
-    &:before {
-      content: $char !important;
-      font-family: 'icomoon';
-      margin-right: $offset;
-      speak: none;
-      font-weight: normal;
-    }
-    &:after {
-      content: "" !important;
-    }
-  }
-  @if $iconside == right {
-    &:before {
-      content: "" !important;
-    }
-    &:after {
-      content: $char !important;
-      font-family: 'icomoon';
-      margin-left: $offset;
-      speak: none;
-      font-weight: normal;
-    }
-  }
-}
-
-
 //NOISE///////////
 //Provides the noise background
 .noise {

h/static/styles/common.scss

@@ -236,7 +236,7 @@ blockquote {
 
   &:before, &:after {
     color: $grayLighter;
-    font-family: "icomoon";
+    font-family: "h";
     position: absolute;
   }
 
@@ -269,7 +269,6 @@ blockquote {
 }
 
 .dropdown-toggle {
-  @include fonticon("\002f", right, 0);
   cursor: pointer;
 
   &:active {
@@ -381,61 +380,6 @@ blockquote {
 
 
 //ICON CLASSES////////////////////////////////
-.flag-icon {
-  @include fonticon("\28", left);
-}
-
-.fave-icon {
-  @include fonticon("\e006", left);
-  &.checked:before {
-    content: "\e005";
-  }
-}
-
-.reply-icon {
-  @include fonticon("\e004", left);
-}
-
-.share-icon {
-  @include fonticon("\25", left);
-}
-
-.down-icon {
-  @include fonticon("\e007", left);
-}
-
-.clipboard-icon {
-  @include fonticon("\33", left);
-}
-
-.check-icon {
-  @include fonticon("\35", left);
-}
-
-.plus-icon {
-  @include fonticon("\e012", left);  
-}
-
-.x-icon {
-  @include fonticon("\36", left);
-}
-
-.vis-icon {
-  @include fonticon("\e001", left);
-}
-
-.highlight-icon {
-  @include fonticon("\e601", left);
-}
-
-.comment-icon {
-  @include fonticon("\e600", left);
-}
-
-.launch-icon {
-  @include fonticon("\2a", left);
-}
-
 .loading-icon {
   text-align: center
 }
@@ -747,19 +691,17 @@ blockquote {
 
 .share-dialog {
    display: none;
-  .icon-input {
    position: relative;
-    .go-icon {
-      position: absolute;
-      top: .33em;
-    }
-    .share-div {
+
+  input {
+    margin-bottom: 4px;
     margin-left: 1.5em;
-      .share-text {
     width: 100%;
-        margin-bottom: 4px;
-      }
   }
+
+  .launch-icon {
+    position: absolute;
+    top: .33em;
   }
 }
 

h/static/styles/inject.scss

@@ -356,7 +356,7 @@ $baseFontSize: 14px;
     &:focus { outline: 0; }
     &:hover { color: $linkColorHover; }
 
-    &.tri-icon {
+    &.icon-comment {
       text-shadow:
       0 0 2px $grayLightest,
       0 0 0 $gray;
@@ -368,23 +368,6 @@ $baseFontSize: 14px;
   }
 }
 
-// Toolbar Icons
-.alwaysonhighlights-icon {
-  @include fonticon("\e602", left);
-}
-
-.highlighter-icon {
-  @include fonticon("\e601", left);
-}
-
-.commenter-icon {
-  @include fonticon("\e012", left);
-}
-
-.tri-icon {
-  @include fonticon("\e00b", left);
-}
-
 
 // Toolbar notification counter
 .annotator-notification-counter {