TestTask

font/icon/Read Me.txt

@@ -0,0 +1,7 @@
+Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
+
+To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
+
+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.

font/icon/demo-files/demo.css

@@ -0,0 +1,155 @@
+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-family: sans-serif;
+  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;
+}
+.unit {
+  float: left;
+}
+.unitRight {
+  float: right;
+}
+.size1of2 {
+  width: 50%;
+}
+.size1of1 {
+  width: 100%;
+}
+.clearfix:before, .clearfix:after {
+  content: " ";
+  display: table;
+}
+.clearfix:after {
+  clear: both;
+}
+.hidden-true {
+  display: none;
+}
+.textbox0 {
+  width: 3em;
+  background: #f1f1f1;
+  padding: .25em .5em;
+  line-height: 1.5;
+  height: 1.5em;
+}
+#testDrive {
+  display: block;
+  padding-top: 24px;
+  line-height: 1.5;
+}
+.fs0 {
+  font-size: 16px;
+}
+.fs1 {
+  font-size: 20px;
+}
+.fs2 {
+  font-size: 32px;
+}
+

font/icon/demo-files/demo.js

@@ -0,0 +1,30 @@
+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();
+}());

font/icon/demo.html

@@ -0,0 +1,83 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>IcoMoon Demo</title>
+    <meta name="description" content="An Icon Font Generated By IcoMoon.io">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="demo-files/demo.css">
+    <link rel="stylesheet" href="style.css"></head>
+<body>
+    <div class="bgc1 clearfix">
+        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;3)</small></h1>
+    </div>
+    <div class="clearfix mhl ptl">
+        <h1 class="mvm mtn fgc1">Grid Size: 20</h1>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-google"></span>
+                <span class="mls"> icon-google</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e900" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe900;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+    </div>
+    <div class="clearfix mhl ptl">
+        <h1 class="mvm mtn fgc1">Grid Size: 16</h1>
+        <div class="glyph fs2">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-facebook"></span>
+                <span class="mls"> icon-facebook</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e901" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe901;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs2">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-twitter"></span>
+                <span class="mls"> icon-twitter</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e902" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe902;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+    </div>
+
+    <!--[if gt IE 8]><!-->
+    <div class="mhl clearfix mbl">
+        <h1>Font Test Drive</h1>
+        <label>
+            Font Size: <input id="fontSize" type="number" class="textbox0 mbm"
+            min="8" value="48" />
+            px
+        </label>
+        <input id="testText" type="text" class="phl size1of1 mvl"
+        placeholder="Type some text to test..." value=""/>
+        <div id="testDrive" class="icon-" style="font-family: icomoon">&nbsp;
+        </div>
+    </div>
+    <!--<![endif]-->
+    <div class="bgc1 clearfix">
+        <p class="mhl">Generated by <a href="https://icomoon.io/app">IcoMoon</a></p>
+    </div>
+
+    <script src="demo-files/demo.js"></script>
+</body>
+</html>

font/icon/icon_font.css

@@ -0,0 +1,36 @@
+@font-face {
+  font-family: 'icomoon';
+  src:  url('fonts/icomoon.eot?h8u7q8');
+  src:  url('fonts/icomoon.eot?h8u7q8#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?h8u7q8') format('truetype'),
+    url('fonts/icomoon.woff?h8u7q8') format('woff'),
+    url('fonts/icomoon.svg?h8u7q8#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: never;
+  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-google:before {
+  content: "\e900";
+}
+.icon-facebook:before {
+  content: "\e901";
+}
+.icon-twitter:before {
+  content: "\e902";
+}

font/icon/selection.json

@@ -0,0 +1 @@
+{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M101.837 286.157c0 76.493 25.549 131.686 75.878 164.096 41.267 26.624 89.088 30.618 113.971 30.618 6.042 0 10.906-0.307 14.285-0.512 0 0-7.885 51.405 30.208 102.195h-1.741c-65.997 0-281.242 13.773-281.242 190.822 0 180.019 197.683 189.184 237.363 189.184 3.123 0 4.966-0.102 4.966-0.102 0.41 0 3.226 0.102 8.090 0.102 25.446 0 91.238-3.174 152.32-32.922 79.258-38.4 119.45-105.421 119.45-198.912 0-90.317-61.235-144.077-105.933-183.398-27.29-24.013-50.893-44.698-50.893-64.819 0-20.48 17.254-35.891 39.014-55.398 35.277-31.488 68.557-76.39 68.557-161.28 0-74.598-9.677-124.723-69.325-156.518 6.195-3.174 28.211-5.478 39.066-7.014 32.307-4.403 79.565-9.421 79.565-35.789v-5.069h-235.469c-2.355 0.102-238.131 8.806-238.131 224.717zM481.946 747.622c4.506 71.987-57.088 125.082-149.606 131.789-93.952 6.912-171.264-35.379-175.77-107.315-2.202-34.611 13.005-68.403 42.752-95.386 30.157-27.29 71.578-44.186 116.634-47.514 5.325-0.307 10.598-0.614 15.872-0.614 86.989 0.051 145.869 51.149 150.118 119.040zM420.454 236.851c23.091 81.306-11.776 166.195-67.379 181.914-6.4 1.792-12.954 2.662-19.661 2.662-50.893 0-101.325-51.507-120.064-122.522-10.445-39.731-9.574-74.65 2.406-108.134 11.725-33.024 32.922-55.194 59.546-62.72 6.4-1.792 13.005-2.714 19.712-2.714 61.44 0 100.966 25.498 125.44 111.514zM819.2 409.6v-153.6h-102.4v153.6h-153.6v102.4h153.6v153.6h102.4v-153.6h153.6v-102.4h-153.6z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["google+"],"grid":20},"attrs":[{}],"properties":{"order":11,"id":1,"name":"google","prevSize":20,"code":59648},"setIdx":0,"setId":3,"iconIdx":0},{"icon":{"paths":["M608 192h160v-192h-160c-123.514 0-224 100.486-224 224v96h-128v192h128v512h192v-512h160l32-192h-192v-96c0-17.346 14.654-32 32-32z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["facebook","brand","social"],"grid":16},"attrs":[{}],"properties":{"order":1,"id":1,"name":"facebook","prevSize":32,"code":59649},"setIdx":2,"setId":1,"iconIdx":0},{"icon":{"paths":["M1024 226.4c-37.6 16.8-78.2 28-120.6 33 43.4-26 76.6-67.2 92.4-116.2-40.6 24-85.6 41.6-133.4 51-38.4-40.8-93-66.2-153.4-66.2-116 0-210 94-210 210 0 16.4 1.8 32.4 5.4 47.8-174.6-8.8-329.4-92.4-433-219.6-18 31-28.4 67.2-28.4 105.6 0 72.8 37 137.2 93.4 174.8-34.4-1-66.8-10.6-95.2-26.2 0 0.8 0 1.8 0 2.6 0 101.8 72.4 186.8 168.6 206-17.6 4.8-36.2 7.4-55.4 7.4-13.6 0-26.6-1.4-39.6-3.8 26.8 83.4 104.4 144.2 196.2 146-72 56.4-162.4 90-261 90-17 0-33.6-1-50.2-3 93.2 59.8 203.6 94.4 322.2 94.4 386.4 0 597.8-320.2 597.8-597.8 0-9.2-0.2-18.2-0.6-27.2 41-29.4 76.6-66.4 104.8-108.6z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["twitter","brand","tweet","social"],"grid":16},"attrs":[{}],"properties":{"order":1,"id":0,"name":"twitter","prevSize":32,"code":59650},"setIdx":2,"setId":1,"iconIdx":1}],"height":1024,"metadata":{"name":"icomoon"},"preferences":{"showGlyphs":true,"showCodes":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"icomoon"},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215},"historySize":50}}