beginnings of using icons.

css/style.css

@@ -82,6 +82,22 @@ div#loading{
 	background-repeat: no-repeat;
 	background-position: center;
 }
+span.icon-bugs{
+	background-image: url('../img/bug.png');
+	background-size: 100%;
+	background-repeat: no-repeat;
+	display: block;
+	width: 35px;
+	height: 35px;
+}
+span.icon-bugs-invert{
+	background-image: url('../img/bug-invert.png');
+	background-size: 100%;
+	background-repeat: no-repeat;
+	display: block;
+	width: 35px;
+	height: 35px;
+}
 @media screen and (max-width: 767px){
 	div#topbar a{
 		padding-left: 5px;
@@ -92,6 +108,8 @@ div#loading{
 	}
 	a.topbar-home span{
 		display: none;
+		padding-left: 2px !important;
+		padding-right: 2px !important;
 	}
 	a.topbar-home:after{
 		content: "\2261";
@@ -112,10 +130,6 @@ div#loading{
 	a.topbar-current{
 		float: right !important;
 	}
-	a.topbar-home{
-		padding-left: 2px !important;
-		padding-right: 2px !important;
-	}
 	a.topbar-back,a.topbar-history,a.topbar-index{
 		width: 35px !important;
 		position: absolute;

data/pages/topbar.template

@@ -8,9 +8,7 @@
 -->
 <div class="topbar-left">
 	<a class="topbar-home" href="#page-index">
-		<span>
-			&#8962;
-		</span>
+		<span class="icon-bugs"></span>
 	</a>
 	<a class="topbar-current" href="#{{url}}">
 		{{title}}
@@ -24,7 +22,7 @@
 		&larr;
 	</a>
 	<a class="topbar-index" href="#page-index">
-		&#8962;
+		<span class="icon-bugs-invert"></span>
 	</a>
 	{{#unless key}}
 		<a href="#page-users">

index.php

@@ -59,6 +59,8 @@
 		<meta charset=utf-8>
 		<meta name="viewport" content="width=device-width, user-scalable=false, initial-scale=1, maximum-scale=1.0, user-scalable=0, user-scalable=no">
 		<meta name="apple-mobile-web-app-capable" content="yes" />
+		<link rel="shortcut icon" href="img/favicon.ico" />
+		<link rel="icon" type="image/png" href="img/bug.png" />
 		<title>Bugs</title>
 		<script src="js/modernizr.js"></script>
 		<script>