Add new font set with an icon for converse.js

and one for logging out. Also added a favicon.

Add new font set with an icon for converse.js
and one for logging out. Also added a favicon.
b241f8c6 · JC Brand · 7b6dfff9 · b241f8c6 · b241f8c6 · b241f8c6
Commit b241f8c6 authored Sep 21, 2014 by JC Brand
12 changed files
--- a/css/converse.css
+++ b/css/converse.css
@@ -7,8 +7,8 @@
 */
 @font-face {
  font-family: 'Converse-js';
-  src: url('../fonticons/fonts/icomoon.eot?-5hv4s0');
+  src: url('../fonticons/fonts/icomoon.eot?-mnoxh0');
-  src: url('../fonticons/fonts/icomoon.eot?#iefix-5hv4s0') format('embedded-opentype'), url('../fonticons/fonts/icomoon.woff?-5hv4s0') format('woff'), url('../fonticons/fonts/icomoon.ttf?-5hv4s0') format('truetype'), url('../fonticons/fonts/icomoon.svg?-5hv4s0#icomoon') format('svg');
+  src: url('../fonticons/fonts/icomoon.eot?#iefix-mnoxh0') format('embedded-opentype'), url('../fonticons/fonts/icomoon.woff?-mnoxh0') format('woff'), url('../fonticons/fonts/icomoon.ttf?-mnoxh0') format('truetype'), url('../fonticons/fonts/icomoon.svg?-mnoxh0#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
 }
@@ -38,6 +38,21 @@
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }
+.icon-conversejs {
+  font-family: 'Converse-js';
+  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-conversejs:before {
+  content: "\e600";
+}
 #conversejs .icon-closed:before {
  content: "\25ba";
 }
@@ -307,6 +322,9 @@
 #conversejs .icon-dnd:before {
  content: "\e004";
 }
+#conversejs .icon-exit:before {
+  content: "\e601";
+}
 #conversejs .no-text-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;

--- a/css/images/favicon.ico
+++ b/css/images/favicon.ico
--- a/css/theme.css
+++ b/css/theme.css
@@ -16,7 +16,6 @@ h4,
 h5,
 h6 {
  margin: 0 0 35px;
-  text-transform: uppercase;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 1px;

--- a/fonticons/demo.html
+++ b/fonticons/demo.html
@@ -9,10 +9,23 @@
 	<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;89)</small></h1>
+		<h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;91)</small></h1>
 	</div>
 	<div class="clearfix mhl ptl">
 		<h1 class="mvm mtn bshadow fgc1">Grid Size: 16</h1>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-conversejs"></span><span class="mls"> icon-conversejs</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="e600" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#xe600;" 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 fs1">
 			<div class="clearfix bshadow0 pbs">
 				<span class="icon-closed"></span><span class="mls"> icon-closed</span>
@@ -93,7 +106,7 @@
 		</div>
 		<div class="glyph fs1">
 			<div class="clearfix bshadow0 pbs">
-				<span class="icon-camera2"></span><span class="mls"> icon-camera2</span>
+				<span class="icon-camera-2"></span><span class="mls"> icon-camera-2</span>
 			</div>
 			<fieldset class="fs0 size1of1 clearfix hidden-false">
 				<input type="text" readonly value="2616" class="unit size1of2" />
@@ -106,7 +119,7 @@
 		</div>
 		<div class="glyph fs1">
 			<div class="clearfix bshadow0 pbs">
-				<span class="icon-play22"></span><span class="mls"> icon-play22</span>
+				<span class="icon-play"></span><span class="mls"> icon-play</span>
 			</div>
 			<fieldset class="fs0 size1of1 clearfix hidden-false">
 				<input type="text" readonly value="25d9" class="unit size1of2" />
@@ -223,7 +236,7 @@
 		</div>
 		<div class="glyph fs1">
 			<div class="clearfix bshadow0 pbs">
-				<span class="icon-bubble"></span><span class="mls"> icon-bubble</span>
+				<span class="icon-online"></span><span class="mls"> icon-online</span>
 			</div>
 			<fieldset class="fs0 size1of1 clearfix hidden-false">
 				<input type="text" readonly value="25fc" class="unit size1of2" />
@@ -236,7 +249,7 @@
 		</div>
 		<div class="glyph fs1">
 			<div class="clearfix bshadow0 pbs">
-				<span class="icon-bubble2"></span><span class="mls"> icon-bubble2</span>
+				<span class="icon-away"></span><span class="mls"> icon-away</span>
 			</div>
 			<fieldset class="fs0 size1of1 clearfix hidden-false">
 				<input type="text" readonly value="25fb" class="unit size1of2" />
@@ -431,7 +444,7 @@
 		</div>
 		<div class="glyph fs1">
 			<div class="clearfix bshadow0 pbs">
-				<span class="icon-lock2"></span><span class="mls"> icon-lock2</span>
+				<span class="icon-lock-2"></span><span class="mls"> icon-lock-2</span>
 			</div>
 			<fieldset class="fs0 size1of1 clearfix hidden-false">
 				<input type="text" readonly value="e027" class="unit size1of2" />
@@ -457,7 +470,7 @@
 		</div>
 		<div class="glyph fs1">
 			<div class="clearfix bshadow0 pbs">
-				<span class="icon-key2"></span><span class="mls"> icon-key2</span>
+				<span class="icon-key-2"></span><span class="mls"> icon-key-2</span>
 			</div>
 			<fieldset class="fs0 size1of1 clearfix hidden-false">
 				<input type="text" readonly value="e029" class="unit size1of2" />
@@ -1107,7 +1120,7 @@
 		</div>
 		<div class="glyph fs1">
 			<div class="clearfix bshadow0 pbs">
-				<span class="icon-info2"></span><span class="mls"> icon-info2</span>
+				<span class="icon-room-info"></span><span class="mls"> icon-room-info</span>
 			</div>
 			<fieldset class="fs0 size1of1 clearfix hidden-false">
 				<input type="text" readonly value="e059" class="unit size1of2" />
@@ -1170,6 +1183,19 @@
 				<input type="text" readonly value="" class="liga unitRight" />
 			</div>
 		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-exit"></span><span class="mls"> icon-exit</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="e601" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#xe601;" 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]><!-->

--- a/fonticons/fonts/icomoon.eot
+++ b/fonticons/fonts/icomoon.eot
--- a/fonticons/fonts/icomoon.svg
+++ b/fonticons/fonts/icomoon.svg
@@ -96,4 +96,6 @@
 <glyph unicode="&#xe058;" d="M256 480c-141.385 0-256-114.615-256-256s114.615-256 256-256 256 114.615 256 256-114.615 256-256 256zM384 306.745l-82.744-82.745 82.744-82.744v-45.256h-45.256l-82.744 82.744-82.745-82.744h-45.255v45.256l82.745 82.744-82.745 82.745v45.255h45.255l82.745-82.745 82.744 82.745h45.256v-45.255z" />
 <glyph unicode="&#xe059;" d="M256 480c-141.385 0-256-114.615-256-256s114.615-256 256-256 256 114.615 256 256-114.615 256-256 256zM224 384h64v-64h-64v64zM320 64h-128v32h32v128h-32v32h96v-160h32v-32z" />
 <glyph unicode="&#xe05a;" d="M0 272v-96c0-8.836 7.164-16 16-16h480c8.836 0 16 7.164 16 16v96c0 8.836-7.164 16-16 16h-480c-8.836 0-16-7.164-16-16z" />
+<glyph unicode="&#xe600;" d="M39.349 399.017c-17.206 0-31.051-13.844-31.051-31.051v-361.923c0-17.207 13.845-31.068 31.051-31.068h323.589c17.207 0 31.068 13.861 31.068 31.068v361.923c0 17.207-13.861 31.051-31.068 31.051h-323.589zM46.803 392.288h309.317c16.698 0 30.151-13.454 30.151-30.151v-118.928l-46.498-52.778h-269.841l-5.207-4.325-47.364-54.733-0.761 83.5 0.242 2.526c-0.109 1.043-0.173 2.092-0.173 3.166v141.571c0 16.698 13.437 30.152 30.134 30.152zM274.731 341.379c-27.38 0-49.578-22.182-49.578-49.561s22.198-49.578 49.578-49.578c27.38 0 49.578 22.198 49.578 49.578s-22.199 49.561-49.578 49.561zM125.65 133.691c0.425 0.010 0.853 0 1.28 0 27.38 0 49.56-22.181 49.56-49.56s-22.181-49.578-49.56-49.578c-27.38 0-49.578 22.199-49.578 49.578 0 26.952 21.51 48.882 48.298 49.56z" horiz-adv-x="410" />
+<glyph unicode="&#xe601;" d="M384 160v64h-160v64h160v64l96-96zM352 192v-128h-160v-96l-192 96v416h352v-160h-32v128h-256l128-64v-288h128v96z" />
 </font></defs></svg>
\ No newline at end of file
--- a/fonticons/fonts/icomoon.ttf
+++ b/fonticons/fonts/icomoon.ttf
--- a/fonticons/fonts/icomoon.woff
+++ b/fonticons/fonts/icomoon.woff
--- a/fonticons/selection.json
+++ b/fonticons/selection.json
--- a/fonticons/style.css
+++ b/fonticons/style.css
 @font-face {
 	font-family: 'icomoon';
-	src:url('fonts/icomoon.eot?-5hv4s0');
+	src:url('fonts/icomoon.eot?-mnoxh0');
-	src:url('fonts/icomoon.eot?#iefix-5hv4s0') format('embedded-opentype'),
+	src:url('fonts/icomoon.eot?#iefix-mnoxh0') format('embedded-opentype'),
-		url('fonts/icomoon.woff?-5hv4s0') format('woff'),
+		url('fonts/icomoon.woff?-mnoxh0') format('woff'),
-		url('fonts/icomoon.ttf?-5hv4s0') format('truetype'),
+		url('fonts/icomoon.ttf?-mnoxh0') format('truetype'),
-		url('fonts/icomoon.svg?-5hv4s0#icomoon') format('svg');
+		url('fonts/icomoon.svg?-mnoxh0#icomoon') format('svg');
 	font-weight: normal;
 	font-style: normal;
 }
@@ -23,270 +23,276 @@
 	-moz-osx-font-smoothing: grayscale;
 }
-.icon-closed:before {
+#conversejs .icon-conversejs:before {
+	content: "\e600";
+}
+#conversejs .icon-closed:before {
 	content: "\25ba";
 }
-.icon-opened:before {
+#conversejs .icon-opened:before {
 	content: "\25bc";
 }
-.icon-checkmark:before {
+#conversejs .icon-checkmark:before {
 	content: "\2713";
 }
-.icon-home:before {
+#conversejs .icon-home:before {
 	content: "\e000";
 }
-.icon-pencil:before {
+#conversejs .icon-pencil:before {
 	content: "\270e";
 }
-.icon-camera:before {
+#conversejs .icon-camera:before {
 	content: "\e003";
 }
-.icon-camera2:before {
+#conversejs .icon-camera-2:before {
 	content: "\2616";
 }
-.icon-play22:before {
+#conversejs .icon-play:before {
 	content: "\25d9";
 }
-.icon-music:before {
+#conversejs .icon-music:before {
 	content: "\266b";
 }
-.icon-headphones:before {
+#conversejs .icon-headphones:before {
 	content: "\266c";
 }
-.icon-phone:before {
+#conversejs .icon-phone:before {
 	content: "\260f";
 }
-.icon-phone-hang-up:before {
+#conversejs .icon-phone-hang-up:before {
 	content: "\260e";
 }
-.icon-address-book:before {
+#conversejs .icon-address-book:before {
 	content: "\270f";
 }
-.icon-notebook:before {
+#conversejs .icon-notebook:before {
 	content: "\2710";
 }
-.icon-envelop:before {
+#conversejs .icon-envelop:before {
 	content: "\2709";
 }
-.icon-pushpin:before {
+#conversejs .icon-pushpin:before {
 	content: "\e012";
 }
-.icon-bubble:before {
+#conversejs .icon-online:before {
 	content: "\25fc";
 }
-.icon-bubble2:before {
+#conversejs .icon-away:before {
 	content: "\25fb";
 }
-.icon-bubbles:before {
+#conversejs .icon-bubbles:before {
 	content: "\e015";
 }
-.icon-bubbles2:before {
+#conversejs .icon-bubbles2:before {
 	content: "\e016";
 }
-.icon-bubbles3:before {
+#conversejs .icon-bubbles3:before {
 	content: "\e017";
 }
-.icon-user:before {
+#conversejs .icon-user:before {
 	content: "\e01a";
 }
-.icon-hide-users:before {
+#conversejs .icon-hide-users:before {
 	content: "\e01c";
 }
-.icon-show-users:before {
+#conversejs .icon-show-users:before {
 	content: "\e01e";
 }
-.icon-users:before {
+#conversejs .icon-users:before {
 	content: "\e01b";
 }
-.icon-quotes-left:before {
+#conversejs .icon-quotes-left:before {
 	content: "\e01d";
 }
-.icon-spinner:before {
+#conversejs .icon-spinner:before {
 	content: "\231b";
 }
-.icon-search:before {
+#conversejs .icon-search:before {
 	content: "\e021";
 }
-.icon-cogs:before {
+#conversejs .icon-cogs:before {
 	content: "\e022";
 }
-.icon-wrench:before {
+#conversejs .icon-wrench:before {
 	content: "\e024";
 }
-.icon-unlocked:before {
+#conversejs .icon-unlocked:before {
 	content: "\e025";
 }
-.icon-lock:before {
+#conversejs .icon-lock:before {
 	content: "\e026";
 }
-.icon-lock2:before {
+#conversejs .icon-lock-2:before {
 	content: "\e027";
 }
-.icon-key:before {
+#conversejs .icon-key:before {
 	content: "\e028";
 }
-.icon-key2:before {
+#conversejs .icon-key-2:before {
 	content: "\e029";
 }
-.icon-zoomout:before {
+#conversejs .icon-zoomout:before {
 	content: "\e02a";
 }
-.icon-zoomin:before {
+#conversejs .icon-zoomin:before {
 	content: "\e02b";
 }
-.icon-cog:before {
+#conversejs .icon-cog:before {
 	content: "\e02f";
 }
-.icon-remove:before {
+#conversejs .icon-remove:before {
 	content: "\e02d";
 }
-.icon-eye:before {
+#conversejs .icon-eye:before {
 	content: "\e030";
 }
-.icon-eye-blocked:before {
+#conversejs .icon-eye-blocked:before {
 	content: "\e031";
 }
-.icon-attachment:before {
+#conversejs .icon-attachment:before {
 	content: "\e032";
 }
-.icon-globe:before {
+#conversejs .icon-globe:before {
 	content: "\e033";
 }
-.icon-heart:before {
+#conversejs .icon-heart:before {
 	content: "\2764";
 }
-.icon-happy:before {
+#conversejs .icon-happy:before {
 	content: "\263b";
 }
-.icon-thumbs-up:before {
+#conversejs .icon-thumbs-up:before {
 	content: "\261d";
 }
-.icon-smiley:before {
+#conversejs .icon-smiley:before {
 	content: "\263a";
 }
-.icon-tongue:before {
+#conversejs .icon-tongue:before {
 	content: "\e038";
 }
-.icon-sad:before {
+#conversejs .icon-sad:before {
 	content: "\2639";
 }
-.icon-wink:before {
+#conversejs .icon-wink:before {
 	content: "\e03a";
 }
-.icon-wondering:before {
+#conversejs .icon-wondering:before {
 	content: "\2369";
 }
-.icon-confused:before {
+#conversejs .icon-confused:before {
 	content: "\2368";
 }
-.icon-shocked:before {
+#conversejs .icon-shocked:before {
 	content: "\2364";
 }
-.icon-evil:before {
+#conversejs .icon-evil:before {
 	content: "\261f";
 }
-.icon-angry:before {
+#conversejs .icon-angry:before {
 	content: "\e03f";
 }
-.icon-cool:before {
+#conversejs .icon-cool:before {
 	content: "\e040";
 }
-.icon-grin:before {
+#conversejs .icon-grin:before {
 	content: "\e041";
 }
-.icon-info:before {
+#conversejs .icon-info:before {
 	content: "\2360";
 }
-.icon-notification:before {
+#conversejs .icon-notification:before {
 	content: "\e01f";
 }
-.icon-warning:before {
+#conversejs .icon-warning:before {
 	content: "\26a0";
 }
-.icon-spell-check:before {
+#conversejs .icon-spell-check:before {
 	content: "\e045";
 }
-.icon-volume-high:before {
+#conversejs .icon-volume-high:before {
 	content: "\e046";
 }
-.icon-volume-medium:before {
+#conversejs .icon-volume-medium:before {
 	content: "\e047";
 }
-.icon-volume-low:before {
+#conversejs .icon-volume-low:before {
 	content: "\e048";
 }
-.icon-volume-mute:before {
+#conversejs .icon-volume-mute:before {
 	content: "\e049";
 }
-.icon-volume-mute2:before {
+#conversejs .icon-volume-mute2:before {
 	content: "\e04a";
 }
-.icon-volume-decrease:before {
+#conversejs .icon-volume-decrease:before {
 	content: "\e04b";
 }
-.icon-volume-increase:before {
+#conversejs .icon-volume-increase:before {
 	content: "\e04c";
 }
-.icon-bold:before {
+#conversejs .icon-bold:before {
 	content: "\e04d";
 }
-.icon-underline:before {
+#conversejs .icon-underline:before {
 	content: "\e04e";
 }
-.icon-italic:before {
+#conversejs .icon-italic:before {
 	content: "\e04f";
 }
-.icon-strikethrough:before {
+#conversejs .icon-strikethrough:before {
 	content: "\e050";
 }
-.icon-newtab:before {
+#conversejs .icon-newtab:before {
 	content: "\e053";
 }
-.icon-youtube:before {
+#conversejs .icon-youtube:before {
 	content: "\e055";
 }
-.icon-close:before {
+#conversejs .icon-close:before {
 	content: "\2715";
 }
-.icon-blocked:before {
+#conversejs .icon-blocked:before {
 	content: "\2718";
 }
-.icon-cancel-circle:before {
+#conversejs .icon-cancel-circle:before {
 	content: "\e058";
 }
-.icon-minus:before {
+#conversejs .icon-minus:before {
 	content: "\e05a";
 }
-.icon-plus:before {
+#conversejs .icon-plus:before {
 	content: "\271a";
 }
-.icon-checkbox-checked:before {
+#conversejs .icon-checkbox-checked:before {
 	content: "\2611";
 }
-.icon-checkbox-unchecked:before {
+#conversejs .icon-checkbox-unchecked:before {
 	content: "\2b27";
 }
-.icon-checkbox-partial:before {
+#conversejs .icon-checkbox-partial:before {
 	content: "\2b28";
 }
-.icon-radio-checked:before {
+#conversejs .icon-radio-checked:before {
 	content: "\2b26";
 }
-.icon-radio-unchecked:before {
+#conversejs .icon-radio-unchecked:before {
 	content: "\2b25";
 }
-.icon-info2:before {
+#conversejs .icon-room-info:before {
 	content: "\e059";
 }
-.icon-newspaper:before {
+#conversejs .icon-newspaper:before {
 	content: "\e001";
 }
-.icon-image:before {
+#conversejs .icon-image:before {
 	content: "\2b14";
 }
-.icon-offline:before {
+#conversejs .icon-offline:before {
 	content: "\e002";
 }
-.icon-busy:before {
+#conversejs .icon-busy:before {
 	content: "\e004";
 }
+#conversejs .icon-exit:before {
+	content: "\e601";
+}
--- a/index.html
+++ b/index.html
@@ -13,6 +13,7 @@
    <link type="text/css" rel="stylesheet" media="screen" href="css/theme.css" />
    <link type="text/css" rel="stylesheet" media="screen" href="css/converse.css" />
    <script src="components/requirejs/require.js"></script>
+    <link rel="shortcut icon" type="image/ico" href="css/images/favicon.ico"/>
 </head>
 <body id="page-top" data-spy="scroll" data-target=".navbar-custom">
@@ -67,7 +68,7 @@
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
-                        <h1 class="brand-heading">Converse.js</h1>
+                        <h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1>
                        <p class="intro-text">A free and open-source XMPP chat client for your website</p>
                        <div class="page-scroll">
                            <a href="#about" class="btn btn-default btn-lg">Learn More</a>

--- a/less/converse.less
+++ b/less/converse.less
@@ -10,11 +10,11 @@
 @font-face {
 	font-family: 'Converse-js';
-	src:url('../fonticons/fonts/icomoon.eot?-5hv4s0');
+    src:url('../fonticons/fonts/icomoon.eot?-mnoxh0');
-	src:url('../fonticons/fonts/icomoon.eot?#iefix-5hv4s0') format('embedded-opentype'),
+    src:url('../fonticons/fonts/icomoon.eot?#iefix-mnoxh0') format('embedded-opentype'),
-		url('../fonticons/fonts/icomoon.woff?-5hv4s0') format('woff'),
+        url('../fonticons/fonts/icomoon.woff?-mnoxh0') format('woff'),
-		url('../fonticons/fonts/icomoon.ttf?-5hv4s0') format('truetype'),
+        url('../fonticons/fonts/icomoon.ttf?-mnoxh0') format('truetype'),
-		url('../fonticons/fonts/icomoon.svg?-5hv4s0#icomoon') format('svg');
+        url('../fonticons/fonts/icomoon.svg?-mnoxh0#icomoon') format('svg');
 	font-weight: normal;
 	font-style: normal;
 }
@@ -46,6 +46,22 @@
 	-moz-osx-font-smoothing: grayscale;
 }
+.icon-conversejs {
+	font-family: 'Converse-js';
+	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-conversejs:before {
+	content: "\e600";
+}
 #conversejs .icon-closed:before {
 	content: "\25ba";
 }
@@ -315,6 +331,9 @@
 #conversejs .icon-dnd:before {
 	content: "\e004";
 }
+#conversejs .icon-exit:before {
+	content: "\e601";
+}
 #conversejs .no-text-select {
    -webkit-touch-callout: none;