Fontello icon font

client/gulpfile.js

@@ -27,10 +27,10 @@ gulp.task('html', function() {
 });
 
 gulp.task('css', function() {
-    gulp.src('./src/*.css')
+    gulp.src('./src/css/*.css')
         .pipe(autoprefixer())
         .pipe(minifyCSS())
-        .pipe(gulp.dest('./dist'));
+        .pipe(gulp.dest('./dist/css'));
 });
 
 gulp.task('js', function() {
@@ -70,14 +70,19 @@ function js(watch) {
     return rebundle();
 }
 
-gulp.task('gzip', ['html', 'css', 'js'], function() {
+gulp.task('fonts', function() {
-    gulp.src('./dist/*.{html,css,js}')
+    gulp.src('./src/font/*')
+        .pipe(gulp.dest('./dist/font'));
+});
+
+gulp.task('gzip', ['html', 'css', 'js', 'fonts'], function() {
+    gulp.src('./dist/**/!(*.gz)')
         .pipe(gzip())
         .pipe(gulp.dest('./dist'));
 });
 
 gulp.task('gzip:watch', function() {
-    gulp.src('./dist/*.{html,css,js}')
+    gulp.src('./dist/**/*.{html,css,js}')
         .pipe(gzip())
         .pipe(gulp.dest('./dist'));
 });
@@ -89,4 +94,4 @@ gulp.task('watch', ['default'], function() {
     return js(true);
 });
 
-gulp.task('default', ['html', 'css', 'js', 'gzip']);
+gulp.task('default', ['html', 'css', 'js', 'fonts', 'gzip']);

client/src/css/fontello.css

@@ -0,0 +1,54 @@
+@font-face {
+  font-family: 'fontello';
+  src: url('../font/fontello.eot?73444496');
+  src: url('../font/fontello.eot?73444496#iefix') format('embedded-opentype'),
+       url('../font/fontello.woff?73444496') format('woff'),
+       url('../font/fontello.ttf?73444496') format('truetype'),
+       url('../font/fontello.svg?73444496#fontello') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+/*
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  @font-face {
+    font-family: 'fontello';
+    src: url('../font/fontello.svg?73444496#fontello') format('svg');
+  }
+}
+*/
+ 
+ [class^="icon-"]:before, [class*=" icon-"]:before {
+  font-family: "fontello";
+  font-style: normal;
+  font-weight: normal;
+  speak: none;
+ 
+  display: inline-block;
+  text-decoration: inherit;
+  width: 1em;
+  margin-right: .2em;
+  text-align: center;
+  /* opacity: .8; */
+ 
+  /* For safety - reset parent styles, that can break glyph codes*/
+  font-variant: normal;
+  text-transform: none;
+     
+  /* fix buttons height, for twitter bootstrap */
+  line-height: 1em;
+ 
+  /* Animation center compensation - margins should be symmetric */
+  /* remove if not needed */
+  margin-left: .2em;
+ 
+  /* you can be more comfortable with increased icons size */
+  /* font-size: 120%; */
+ 
+  /* Uncomment for 3D effect */
+  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+}
+ 
+.icon-cog:before { content: '\e800'; } /* '' */
+.icon-ellipsis:before { content: '\e801'; } /* '' */

client/src/css/style.css

@@ -26,6 +26,10 @@ p {
 	line-height: 1.5;
 }
 
+i[class^="icon-"]:before, i[class*=" icon-"]:before {
+  margin: 0;
+}
+
 .tablist {
 	position: fixed;
 	left: 0;

client/src/font/fontello.svg

@@ -0,0 +1,13 @@
+<?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>Copyright (C) 2015 by original authors @ fontello.com</metadata>
+<defs>
+<font id="fontello" horiz-adv-x="1000" >
+<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
+<missing-glyph horiz-adv-x="1000" />
+<glyph glyph-name="cog" unicode="&#xe800;" d="m571 350q0 59-41 101t-101 42-101-42-42-101 42-101 101-42 101 42 41 101z m286 61v-124q0-7-4-13t-11-7l-104-16q-10-30-21-51 19-27 59-77 6-6 6-13t-5-13q-15-21-55-61t-53-39q-7 0-14 5l-77 60q-25-13-51-21-9-76-16-104-4-16-20-16h-124q-8 0-14 5t-6 12l-16 103q-27 9-50 21l-79-60q-6-5-14-5-8 0-14 6-70 64-92 94-4 5-4 13 0 6 5 12 8 12 28 37t30 40q-15 28-23 55l-102 15q-7 1-11 7t-5 13v124q0 7 5 13t10 7l104 16q8 25 22 51-23 32-60 77-6 7-6 14 0 5 5 12 15 20 55 60t53 40q7 0 15-5l77-60q24 13 50 21 9 76 17 104 3 15 20 15h124q7 0 13-4t7-12l15-103q28-9 50-21l80 60q5 5 13 5 7 0 14-5 72-67 92-95 4-5 4-13 0-6-4-12-9-12-29-38t-30-39q14-28 23-55l102-15q7-1 12-7t4-13z" horiz-adv-x="857.1" />
+<glyph glyph-name="ellipsis" unicode="&#xe801;" d="m214 439v-107q0-22-15-38t-38-15h-107q-23 0-38 15t-16 38v107q0 23 16 38t38 16h107q22 0 38-16t15-38z m286 0v-107q0-22-16-38t-38-15h-107q-22 0-38 15t-15 38v107q0 23 15 38t38 16h107q23 0 38-16t16-38z m286 0v-107q0-22-16-38t-38-15h-107q-22 0-38 15t-16 38v107q0 23 16 38t38 16h107q22 0 38-16t16-38z" horiz-adv-x="785.7" />
+</font>
+</defs>
+</svg>

client/src/index.html

@@ -7,8 +7,8 @@
 	<title>IRC</title>
 
 	<link href="//fonts.googleapis.com/css?family=Montserrat|Ubuntu+Mono:400,700" rel="stylesheet">
-	<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
+	<link href="css/fontello.css" rel="stylesheet">
-	<link href="style.css" rel="stylesheet">
+	<link href="css/style.css" rel="stylesheet">
 </head>
 <body>
 	<script src="bundle.js"></script>

client/src/js/components/Connect.jsx

@@ -65,7 +65,7 @@ var Connect = React.createClass({
 					{optionals}
 					<p>
 						<label><input name="ssl" type="checkbox" />SSL</label>
-						<i className="fa fa-ellipsis-h" onClick={this.handleShowClick}></i>
+						<i className="icon-ellipsis" onClick={this.handleShowClick}></i>
 					</p>
 					<input type="submit" value="Connect" />
 				</form>

client/src/js/components/MessageBox.jsx

@@ -4,7 +4,6 @@ var _ = require('lodash');
 var Infinite = require('react-infinite');
 
 var util = require('../util');
-var messageStore = require('../stores/message');
 var messageLineStore = require('../stores/messageLine');
 var selectedTabStore = require('../stores/selectedTab');
 var messageActions = require('../actions/message');

client/src/js/components/TabList.jsx

@@ -71,7 +71,7 @@ var TabList = React.createClass({
 				<button className="button-connect" onClick={this.handleConnectClick}>Connect</button>
 				{tabs}
 				<div className="side-buttons">
-					<i className="fa fa-cog" onClick={this.handleSettingsClick}></i>
+					<i className="icon-cog" onClick={this.handleSettingsClick}></i>
 				</div>
 			</div>
 		);

main.go

@@ -17,8 +17,14 @@ var (
 	sessions     map[string]*Session
 	sessionLock  sync.Mutex
 	fs           http.Handler
+	files        []File
 )
 
+type File struct {
+	Path        string
+	ContentType string
+}
+
 func reconnect() {
 	for _, user := range storage.LoadUsers() {
 		channels := user.GetChannels()
@@ -62,17 +68,25 @@ func serveFiles(w http.ResponseWriter, r *http.Request) {
 		ext = ".gz"
 	}
 
-	if strings.HasSuffix(r.URL.Path, "bundle.js") {
+	if r.URL.Path == "/" {
-		w.Header().Set("Content-Type", "text/javascript")
-		r.URL.Path = "/bundle.js" + ext
-	} else if strings.HasSuffix(r.URL.Path, "style.css") {
-		w.Header().Set("Content-Type", "text/css")
-		r.URL.Path = "/style.css" + ext
-	} else {
 		w.Header().Set("Content-Type", "text/html")
 		r.URL.Path = "/index.html" + ext
+		fs.ServeHTTP(w, r)
+		return
 	}
 
+	for _, file := range files {
+		if strings.HasSuffix(r.URL.Path, file.Path) {
+			w.Header().Set("Content-Type", file.ContentType)
+			r.URL.Path = file.Path + ext
+			fs.ServeHTTP(w, r)
+			return
+		}
+	}
+
+	w.Header().Set("Content-Type", "text/html")
+	r.URL.Path = "/index.html" + ext
+
 	fs.ServeHTTP(w, r)
 }
 
@@ -83,6 +97,16 @@ func main() {
 	sessions = make(map[string]*Session)
 	fs = http.FileServer(http.Dir("client/dist"))
 
+	files = []File{
+		File{"/bundle.js", "text/javascript"},
+		File{"/css/style.css", "text/css"},
+		File{"/css/fontello.css", "text/css"},
+		File{"/font/fontello.eot", "application/vnd.ms-fontobject"},
+		File{"/font/fontello.svg", "image/svg+xml"},
+		File{"/font/fontello.ttf", "application/x-font-ttf"},
+		File{"/font/fontello.woff", "application/font-woff"},
+	}
+
 	//reconnect()
 
 	router := httprouter.New()