Merge branch 'master' into issue-139

Conflicts: circle/dashboard/templates/dashboard/_notifications-timeline.html circle/dashboard/templates/dashboard/node-detail/_activity-timeline.html circle/dashboard/templates/dashboard/notifications/ownership-offer.html circle/dashboard/templates/dashboard/notifications/vm-destroyed.html circle/dashboard/templates/dashboard/notifications/vm-expiring.html circle/dashboard/templates/dashboard/notifications/vm-suspended.html circle/dashboard/templates/dashboard/vm-detail/_activity-timeline.html

Merge branch 'master' into issue-139
Conflicts: circle/dashboard/templates/dashboard/_notifications-timeline.html circle/dashboard/templates/dashboard/node-detail/_activity-timeline.html circle/dashboard/templates/dashboard/notifications/ownership-offer.html circle/dashboard/templates/dashboard/notifications/vm-destroyed.html circle/dashboard/templates/dashboard/notifications/vm-expiring.html circle/dashboard/templates/dashboard/notifications/vm-suspended.html circle/dashboard/templates/dashboard/vm-detail/_activity-timeline.html
96f1d71c · Őry Máté · 66805404 · b4b966f0 · 96f1d71c · 96f1d71c
Commit 96f1d71c authored Jul 16, 2014 by Őry Máté
133 changed files
--- a/circle/dashboard/forms.py
+++ b/circle/dashboard/forms.py
@@ -131,7 +131,7 @@ class VmCustomizeForm(forms.Form):
                        "button",
                        AnyTag(
                            "i",
-                            css_class="icon-play"
+                            css_class="fa fa-play"
                        ),
                        HTML(" Start"),
                        css_id="vm-create-customized-start",
@@ -163,7 +163,7 @@ class VmCustomizeForm(forms.Form):
            Div(  # cpu priority
                Div(
                    HTML('<label for="vm-cpu-priority-slider">'
-                         '<i class="icon-trophy"></i> CPU priority'
+                         '<i class="fa fa-trophy"></i> CPU priority'
                         '</label>'),
                    css_class="col-sm-3"
                ),
@@ -182,7 +182,7 @@ class VmCustomizeForm(forms.Form):
            Div(  # cpu count
                Div(
                    HTML('<label for="cpu-count-slider">'
-                         '<i class="icon-cogs"></i> CPU count'
+                         '<i class="fa fa-cogs"></i> CPU count'
                         '</label>'),
                    css_class="col-sm-3"
                ),
@@ -201,7 +201,7 @@ class VmCustomizeForm(forms.Form):
            Div(  # ram size
                Div(
                    HTML('<label for="ram-slider">'
-                         '<i class="icon-ticket"></i> RAM amount'
+                         '<i class="fa fa-ticket"></i> RAM amount'
                         '</label>'),
                    css_class="col-sm-3"
                ),
@@ -313,7 +313,7 @@ class VmCustomizeForm(forms.Form):
                                        "a",
                                        AnyTag(
                                            "i",
-                                            css_class="icon-plus-sign",
+                                            css_class="fa fa-plus-circle",
                                        ),
                                        css_id=("vm-create-network-add"
                                                "-button"),
@@ -556,7 +556,7 @@ class NodeForm(forms.ModelForm):
                                "button",
                                AnyTag(
                                    "i",
-                                    css_class="icon-play"
+                                    css_class="fa fa-play"
                                ),
                                HTML("Start"),
                                css_id="node-create-submit",
@@ -958,7 +958,7 @@ class CircleAuthenticationForm(AuthenticationForm):
                    "span",
                    AnyTag(
                        "i",
-                        css_class="icon-user",
+                        css_class="fa fa-user",
                    ),
                    css_class="input-group-addon",
                ),
@@ -972,7 +972,7 @@ class CircleAuthenticationForm(AuthenticationForm):
                    "span",
                    AnyTag(
                        "i",
-                        css_class="icon-lock",
+                        css_class="fa fa-lock",
                    ),
                    css_class="input-group-addon",
                ),
@@ -1000,7 +1000,7 @@ class CirclePasswordResetForm(PasswordResetForm):
                    "span",
                    AnyTag(
                        "i",
-                        css_class="icon-envelope",
+                        css_class="fa fa-envelope",
                    ),
                    css_class="input-group-addon",
                ),

--- a/circle/dashboard/static/dashboard/bootstrap-slider/slider.css
+++ b/circle/dashboard/static/dashboard/bootstrap-slider/slider.css
--- a/circle/dashboard/static/dashboard/dashboard.css
+++ b/circle/dashboard/static/dashboard/dashboard.css
--- a/circle/dashboard/static/dashboard/dashboard.js
+++ b/circle/dashboard/static/dashboard/dashboard.js
@@ -121,11 +121,11 @@ $(function () {
  $("#dashboard-vm-list").on('click', '.dashboard-vm-favourite', function(e) {
    var star = $(this).children("i");
    var pk = $(this).data("vm");
-    if(star.hasClass("icon-star-empty")) {
-      star.removeClass("icon-star-empty").addClass("icon-star");
+    if(star.hasClass("fa-star-o")) {
+      star.removeClass("fa-star-o").addClass("fa-star");
      star.prop("title", "Unfavourite");
    } else {
-      star.removeClass("icon-star").addClass("icon-star-empty");
+      star.removeClass("fa-star").addClass("fa-star-o");
      star.prop("title", "Mark as favourite");
    }
    $.ajax({
@@ -381,12 +381,12 @@ function generateVmHTML(pk, name, host, icon, _status, fav, is_last) {
  return '<a href="/dashboard/vm/' + pk + '/" class="list-group-item' +
         (is_last ? ' list-group-item-last' : '') + '">' +      
        '<span class="index-vm-list-name">' + 
-          '<i class="' + icon + '" title="' + _status + '"></i> ' + name +
+          '<i class="fa ' + icon + '" title="' + _status + '"></i> ' + name +
        '</span>' + 
        '<small class="text-muted"> ' + host + '</small>' +
        '<div class="pull-right dashboard-vm-favourite" data-vm="' + pk + '">' +  
-          (fav ? '<i class="icon-star text-primary title-favourite" title="Unfavourite"></i>' :
-          '<i class="icon-star-empty text-primary title-favourite" title="Mark as favorite"></i>' ) +
+          (fav ? '<i class="fa fa-star text-primary title-favourite" title="Unfavourite"></i>' :
+          '<i class="fa fa-star-o text-primary title-favourite" title="Mark as favorite"></i>' ) +
        '</div>' +                                                               
      '<div style="clear: both;"></div>' +                                       
      '</a>';     
@@ -394,14 +394,14 @@ function generateVmHTML(pk, name, host, icon, _status, fav, is_last) {

 function generateGroupHTML(url, name) {
  return '<a href="' + url + '" class="list-group-item real-link">'+
-         '<i class="icon-group"></i> '+ name +
+         '<i class="fa fa-users"></i> '+ name +
         '</a>';
 }

 function generateNodeHTML(name, icon, _status, url, is_last) {
  return '<a href="' + url + '" class="list-group-item real-link' + (is_last ? ' list-group-item-last' : '') + '">' +
        '<span class="index-node-list-name">' +
-        '<i class="' + icon + '" title="' + _status + '"></i> ' + name +
+        '<i class="fa ' + icon + '" title="' + _status + '"></i> ' + name +
        '</span>' +
        '<div style="clear: both;"></div>' +
        '</a>';

--- a/circle/dashboard/static/dashboard/loopj-jquery-simple-slider-fa64f59/demo.html
+++ b/circle/dashboard/static/dashboard/loopj-jquery-simple-slider-fa64f59/demo.html
--- a/circle/dashboard/static/dashboard/template-list.js
+++ b/circle/dashboard/static/dashboard/template-list.js
@@ -31,7 +31,7 @@ $(function() {
  ttable.on("aftertablesort", function(event, data) {
    $(".template-list-table thead th i").remove();

-    var icon_html = '<i class="icon-sort-' + (data.direction == "desc" ? "up" : "down") + ' pull-right" style="position: absolute;"></i>';
+    var icon_html = '<i class="fa fa-sort-' + (data.direction == "desc" ? "desc" : "asc") + ' pull-right" style="position: absolute;"></i>';
    $(".template-list-table thead th").eq(data.column).append(icon_html);
  });


--- a/circle/dashboard/static/dashboard/vm-common.js
+++ b/circle/dashboard/static/dashboard/vm-common.js
@@ -4,13 +4,13 @@ $(function() {

  /* vm operations */
  $('#ops, #vm-details-resources-disk').on('click', '.operation.btn', function(e) {
-    var icon = $(this).children("i").addClass('icon-spinner icon-spin');
+    var icon = $(this).children("i").addClass('fa-spinner fa-spin');

    $.ajax({
      type: 'GET',
      url: $(this).attr('href'),
      success: function(data) {
-        icon.removeClass("icon-spinner icon-spin");
+        icon.removeClass("fa-spinner fa-spin");
        $('body').append(data);
        $('#confirmation-modal').modal('show');
        $('#confirmation-modal').on('hidden.bs.modal', function() {

--- a/circle/dashboard/static/dashboard/vm-create.js
+++ b/circle/dashboard/static/dashboard/vm-create.js
@@ -288,11 +288,11 @@ function vmCustomizeLoaded() {


 function vmCreateNetworkLabel(pk, name, managed) {
-  return '<span id="vlan-' + pk + '" class="label label-' +  (managed ? 'primary' : 'default')  + '"><i class="icon-' + (managed ? 'globe' : 'link') + '"></i> ' + name + ' <a href="#" class="hover-black vm-create-remove-network"><i class="icon-remove-sign"></i></a></span> ';
+  return '<span id="vlan-' + pk + '" class="label label-' +  (managed ? 'primary' : 'default')  + '"><i class="fa fa-' + (managed ? 'globe' : 'link') + '"></i> ' + name + ' <a href="#" class="hover-black vm-create-remove-network"><i class="fa fa-times-circle"></i></a></span> ';
 }


 function vmCreateDiskLabel(pk, name) {
  var style = "float: left; margin: 5px 5px 5px 0;";
-  return '<span id="disk-' + pk + '" class="label label-primary" style="' + style + '"><i class="icon-file"></i> ' + name + ' <a href="#" class="hover-black vm-create-remove-disk"><i class="icon-remove-sign"></i></a></span> ';
+  return '<span id="disk-' + pk + '" class="label label-primary" style="' + style + '"><i class="fa fa-file"></i> ' + name + ' <a href="#" class="hover-black vm-create-remove-disk"><i class="fa fa-times-circle"></i></a></span> ';
 }
--- a/circle/dashboard/static/dashboard/vm-details.js
+++ b/circle/dashboard/static/dashboard/vm-details.js
@@ -4,24 +4,24 @@ $(function() {
    checkNewActivity(false, 1);
  }
  $('a[href="#activity"]').click(function(){
-    $('a[href="#activity"] i').addClass('icon-spin');
+    $('a[href="#activity"] i').addClass('fa-spin');
    checkNewActivity(false, 1);
  });

  /* save resources */
  $('#vm-details-resources-save').click(function() {
-    $('i.icon-save', this).removeClass("icon-save").addClass("icon-refresh icon-spin");
+    $('i.fa-floppy-o', this).removeClass("fa-floppy-o").addClass("fa-refresh fa-spin");
    var vm = $(this).data("vm");
    $.ajax({
      type: 'POST',
      url: "/dashboard/vm/" + vm + "/op/resources_change/", 
      data: $('#vm-details-resources-form').serialize(),
      success: function(data, textStatus, xhr) {
-        $("#vm-details-resources-save i").removeClass('icon-refresh icon-spin').addClass("icon-save");
+        $("#vm-details-resources-save i").removeClass('fa-refresh fa-spin').addClass("fa-floppy-o");
        $('a[href="#activity"]').trigger("click");
      },
      error: function(xhr, textStatus, error) {
-        $("#vm-details-resources-save i").removeClass('icon-refresh icon-spin').addClass("icon-save");
+        $("#vm-details-resources-save i").removeClass('fa-refresh fa-spin').addClass("fa-floppy-o");
        if (xhr.status == 500) {
          addMessage("500 Internal Server Error", "danger");
        } else {
@@ -76,13 +76,13 @@ $(function() {
    var eye = $(this).children("#vm-details-pw-eye");
    
    eye.tooltip("destroy")
-    if(eye.hasClass("icon-eye-open")) {
-      eye.removeClass("icon-eye-open").addClass("icon-eye-close");
+    if(eye.hasClass("fa-eye")) {
+      eye.removeClass("fa-eye").addClass("fa-eye-slash");
      input.prop("type", "text");
      input.focus();
      eye.prop("title", "Hide password");
    } else {
-      eye.removeClass("icon-eye-close").addClass("icon-eye-open");
+      eye.removeClass("fa-eye-slash").addClass("fa-eye");
      input.prop("type", "password");
      eye.prop("title", "Show password");
    }
@@ -269,7 +269,7 @@ $(function() {
  $("#getScreenshotButton").click(function() {
    var vm = $(this).data("vm-pk");
    var ct = $("#vm-console-screenshot");
-    $("i", this).addClass("icon-spinner icon-spin");
+    $("i", this).addClass("fa-spinner fa-spin");
    $(this).prop("disabled", true);
    ct.slideDown();
    var img = $("img", ct).prop("src", '/dashboard/vm/' + vm + '/screenshot/');
@@ -280,7 +280,7 @@ $(function() {
  // see: http://stackoverflow.com/a/3877079/1112653
  $("#vm-console-screenshot img").load(function(e) {
    $("#getScreenshotButton").prop("disabled", false)
-    .find("i").removeClass("icon-spinner icon-spin");
+    .find("i").removeClass("fa-spinner fa-spin");

  });
    
@@ -320,7 +320,7 @@ function removePort(data) {
 function decideActivityRefresh() {
  var check = false;
  /* if something is still spinning */
-  if($('.timeline .activity:first i:first').hasClass('icon-spin'))
+  if($('.timeline .activity:first i:first').hasClass('fa-spin'))
    check = true;
  /* if there is only one activity */
  if($('#activity-timeline div[class="activity"]').length < 2)
@@ -360,7 +360,7 @@ function checkNewActivity(only_status, runs) {
        $("[title]").tooltip();
      }

-      $("#vm-details-state i").prop("class", data['icon']);
+      $("#vm-details-state i").prop("class", "fa " + data['icon']);
      $("#vm-details-state span").html(data['human_readable_status'].toUpperCase());
      if(data['status'] == "RUNNING") {
        $("[data-target=#_console]").attr("data-toggle", "pill").attr("href", "#console").parent("li").removeClass("disabled");
@@ -382,7 +382,7 @@ function checkNewActivity(only_status, runs) {
          1000 + Math.exp(runs * 0.05)
        );
      }
-      $('a[href="#activity"] i').removeClass('icon-spin');
+      $('a[href="#activity"] i').removeClass('fa-spin');
    },
    error: function() {


--- a/circle/dashboard/static/dashboard/vm-list.js
+++ b/circle/dashboard/static/dashboard/vm-list.js
@@ -171,7 +171,7 @@ $(function() {
    
    $(".vm-list-table thead th i").remove();

-    var icon_html = '<i class="icon-sort-' + (data.direction == "desc" ? "up" : "down") + ' pull-right"></i>';
+    var icon_html = '<i class="fa fa-sort-' + (data.direction == "desc" ? "desc" : "asc") + ' pull-right"></i>';
    $(".vm-list-table thead th").eq(data.column).append(icon_html);
  });


--- a/circle/dashboard/static/dashboard/vm-tour.js
+++ b/circle/dashboard/static/dashboard/vm-tour.js
@@ -17,13 +17,13 @@ function createTemplateTour() {
                  "<div class='popover-navigation'>" +
                    "<div class='btn-group'>" +
                      "<button class='btn btn-sm btn-default' data-role='prev'>" +
-                        '<i class="icon-chevron-left"></i> ' + gettext("Prev") + "</button> " +
+                        '<i class="fa fa-chevron-left"></i> ' + gettext("Prev") + "</button> " +
                      "<button class='btn btn-sm btn-default' data-role='next'>" +
-                        gettext("Next") + ' <i class="icon-chevron-right"></i></button> ' +
+                        gettext("Next") + ' <i class="fa fa-chevron-right"></i></button> ' +
                      "<button class='btn btn-sm btn-default' data-role='pause-resume' data-pause-text='Pause' data-resume-text='Resume'>Pause</button> " +
                    "</div>" +
                    "<button class='btn btn-sm btn-default' data-role='end'>" +
-                      gettext("End tour") + ' <i class="icon-flag-checkered"></i></button>' +
+                      gettext("End tour") + ' <i class="fa fa-flag-checkered"></i></button>' +
                  "</div>" +
                "</div>",
  });
@@ -99,7 +99,7 @@ function createTemplateTour() {

  ttour.addStep({
    element: "#ops",
-    title: '<i class="icon-play"></i> ' + gettext("Deploy"),
+    title: '<i class="fa fa-play"></i> ' + gettext("Deploy"),
    placement: "left",
    backdrop: true,
    content: gettext("Deploy the virtual machine."),
@@ -123,7 +123,7 @@ function createTemplateTour() {

  ttour.addStep({
    element: "#ops",
-    title: '<i class="icon-save"></i> ' + gettext("Save as"),
+    title: '<i class="fa fa-floppy-o"></i> ' + gettext("Save as"),
    placement: "left",
    backdrop: true,
    content: gettext('Press the "Save as template" button and wait until the activity finishes.'),

--- a/circle/dashboard/static/template.css
+++ b/circle/dashboard/static/template.css
+/* Move down content because we have a fixed navbar that is 50px tall */
+body {
+  padding-top: 50px;
+  padding-bottom: 20px;
+  margin-bottom: 30px; /* sticky footer */
+}
+
+html {
+  position: relative;
+  min-height: 100%;
+}
+
+/* Set widths on the navbar form inputs since otherwise they're 100% wide */
+.navbar-form input[type="text"],
+.navbar-form input[type="password"] {
+  width: 180px;
+}
+
+/* Wrapping element */
+/* Set some basic padding to keep content from hitting the edges */
+.body-content {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+/* values for 45px tall navbar */
+.navbar {
+  min-height: 45px;
+}
+
+.navbar-brand {
+  height: 45px;
+  padding: 12.5px 12.5px;
+}
+
+.navbar-toggle {
+  margin-top: 5.5px;
+  margin-bottom: 5.5px;
+}
+
+.navbar-form {
+  margin-top: 5.5px;
+  margin-bottom: 5.5px;
+}
+
+.navbar-btn {
+  margin-top: 5.5px;
+  margin-bottom: 5.5px;
+}
+
+.navbar-btn.btn-sm {
+  margin-top: 7.5px;
+  margin-bottom: 7.5px;
+}
+.navbar-btn.btn-xs {
+  margin-top: 11.5px;
+  margin-bottom: 11.5px;
+}
+.navbar-text {
+  margin-top: 12.5px;
+  margin-bottom: 12.5px;
+}
+
+/* --- */
+
+/* Responsive: Portrait tablets and up */
+@media screen and (min-width: 768px) {
+  /* Let the jumbotron breathe */
+  .container > :first-child {
+    margin-top: 20px;
+  }
+  /* Remove padding from wrapping element since we kick in the grid classes here */
+  .body-content {
+    padding: 0;
+  }
+
+  .navbar-nav > li > a {
+    padding-top: 12.5px;
+    padding-bottom: 12.5px;
+  }
+
+}
+.no-margin {
+  margin: 0!important;
+}
+
+.list-group .list-group-footer {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+.big {
+  font-size: 2em;
+}
+.bigbig {
+  font-size: 3em;
+}
+/* small buttons for tags, copied from Bootstraps input-sm, bnt-sm */
+.btn-tags, .btn-traits {
+  padding: 3px 6px;
+  font-size: 11px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+
+.input-tags, .input-tratis {
+  height: 22px;
+  padding: 2px 8px;
+  font-size: 11px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+/* font awesome font */
+.font-awesome-font {
+  font-family: "FontAwesome";
+}
+
+.nojs-dropdown-menu
+{
+  position:absolute;
+  display:none;
+  z-index: 1;
+}
+
+
+.nojs-dropdown-toggle:focus + .nojs-dropdown-menu
+{
+  display: block;
+}
+
+.nojs-dropdown-toggle:focus
+{
+  outline:none;
+}
+
+.nojs-dropdown-menu:hover
+{
+  display: block;
+}
+
+.notification-messages {
+  padding: 10px 8px;
+  width: 350px;
+}
+
+.notification-message {
+  margin-bottom: 10px;
+  padding: 0 0 4px 0;
+  border-bottom: 1px dotted #D3D3D3;
+}
+
+.notification-messages .notification-message:last-child {
+  margin-bottom: 0px;
+  padding: 0px;
+  border-bottom: none;
+}
+
+.notification-message-text {
+  padding: 8px 15px;
+  display: none;
+}
+
+.notification-message .notification-message-subject {
+  cursor: pointer;
+}
+
+/* footer */
+footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  /* Set the fixed height of the footer here */
+  height: 30px;
+  background-color: #101010;
+  color: white;
+  font-size: 13px;
+  padding: 5px 5px 0 5px;
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
+  text-align: center;
+}
+
+footer a, footer a:hover, footer a:visited {
+  color: white;
+  text-decoration: underline;
+}
+
+.table-sorting {
+  display: none;
+}
+
+#notifications-button {
+  margin: 0;
+}
+
+/* 2px border bottom for all bootstrap tables */
+.table thead>tr>th {
+  border-bottom: 1px;
+}
+
+.badge-pulse {
+  -webkit-animation-name: 'pulse_animation';
+  -webkit-animation-duration: 1000ms;
+  -webkit-transform-origin: 70% 70%;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-timing-function: linear;
+}
+
+@-webkit-keyframes pulse_animation {
+  0% { -webkit-transform: scale(1); }
+  30% { -webkit-transform: scale(1); }
+  40% { -webkit-transform: scale(1.18); }
+  50% { -webkit-transform: scale(1); }
+  60% { -webkit-transform: scale(1); }
+  70% { -webkit-transform: scale(1.08); }
+  80% { -webkit-transform: scale(1); }
+  100% { -webkit-transform: scale(1); }
+}
+
+.btn-toolbar {
+  margin-bottom: 5px;
+}
--- a/circle/dashboard/templates/base.html
+++ b/circle/dashboard/templates/base.html
-{% load i18n %}<!DOCTYPE html>
+{% load i18n %}
+<!DOCTYPE html>
 <html lang="{{lang}}">
  <head>
    <meta charset="utf-8">
@@ -9,26 +10,25 @@

    <title>{% block title %}{% block title-page %}{% endblock %} | {% block title-site %}CIRCLE{% endblock %}{% endblock %}</title>

-    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
-    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
-    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
-    <script src="{{ STATIC_URL }}dashboard/js/jquery.knob.js"></script>
-    <script src="{{ STATIC_URL}}dashboard/bootstrap-slider/bootstrap-slider.js"></script>
-    <link rel="stylesheet" href="{{ STATIC_URL }}dashboard/bootstrap-slider/slider.css"/>
-    <link href="{{ STATIC_URL }}dashboard/bootstrap-tour.min.css" rel="stylesheet">
-    <link href="{{ STATIC_URL }}dashboard/dashboard.css" rel="stylesheet">
-    <script src="{{ STATIC_URL }}dashboard/dashboard.js"></script>
-    <script src="{{ STATIC_URL }}jsi18n/{{ LANGUAGE_CODE }}/djangojs.js"></script>
+    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="{{ STATIC_URL }}/template.css">
+
+    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    {% block extra_link %}{% endblock %}
+
+    {% block extra_css %}{% endblock %}
  </head>

  <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-header">
-          <a class="navbar-brand" href="{% url "dashboard.index" %}" style="padding: 10px 15px;">
-            <img src="{{ STATIC_URL}}dashboard/img/logo.png" style="height: 25px;"/>
-          </a>
+        {% block navbar-brand %}{% endblock %}
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
@@ -36,30 +36,7 @@
          </button>
      </div><!-- .navbar-header -->
      <div class="collapse navbar-collapse">
-          <ul class="nav navbar-nav pull-right">
-            <li class="dropdown" id="notification-button">                            
-              <a href="{% url "dashboard.views.notifications" %}" style="color: white; font-size: 12px;" class="dropdown-toggle" data-toggle="dropdown">
-                {% trans "Notifications" %}{% if NEW_NOTIFICATIONS_COUNT > 0 %} <span class="badge badge-pulse">{{ NEW_NOTIFICATIONS_COUNT }}</span>{% endif %}
-              </a>                                                                    
-              <ul class="dropdown-menu notification-messages">                        
-                  <li>{% trans "Loading..." %}</li>                                   
-              </ul>                                                                   
-            </li>               
-          </ul>
-          {% if user.is_authenticated and user.pk %}
-            <a class="navbar-brand pull-right" href="{% url "logout" %}?next={% url "login" %}" style="color: white; font-size: 10px;"><i class="icon-signout icon-sign-out"></i> {% trans "Log out" %}</a>
-            <a class="navbar-brand pull-right" href="{% url "dashboard.views.profile-preferences" %}" 
-              title="{% trans "User profile" %}" style="color: white; font-size: 10px;">
-              <i class="icon-user"></i>
-              {% include "dashboard/_display-name.html" with user=user show_org=True %}
-            </a>
-            {% if user.is_superuser %}
-              <a class="navbar-brand pull-right" href="/network/" style="color: white; font-size: 10px;"><i class="icon-globe"></i> {% trans "Network" %}</a>
-              <a class="navbar-brand pull-right" href="/admin/" style="color: white; font-size: 10px;"><i class="icon-cogs"></i> {% trans "Admin" %}</a>
-            {% endif %}
-          {% else %}
-            <a class="navbar-brand pull-right" href="{% url "login" %}?next={% url "dashboard.index" %}" style="color: white; font-size: 10px;"><i class="icon-sign-in"></i> {% trans "Log in " %}</a>
-          {% endif %}
+        {% block navbar %}{% endblock %}
      </div><!-- .collapse .navbar-collapse -->
    </div><!-- navbar navbar-inverse navbar-fixed-top -->

@@ -80,12 +57,26 @@
        <h1 class="alert alert-error">Please override "content" block.</h1>
      {% endblock %}
    </div> <!-- /container -->
+
    <footer>
-      <a href="#">{% trans "Legal notice" %}</a> | <a href="#">{% trans "Policy" %}</a> | <a href="#">{% trans "Help" %}</a> |
+      <a href="#">{% trans "Legal notice" %}</a> |
+      <a href="#">{% trans "Policy" %}</a> |
+      <a href="#">{% trans "Help" %}</a> |
      <a href="#">{% trans "Support" %}</a>
      <span class="pull-right">{{ COMPANY_NAME }}</span>
    </footer>
  </body>
-{% block extra_js %}
-{% endblock %}
+
+  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
+  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
+  <script src="{{ STATIC_URL }}jsi18n/{{ LANGUAGE_CODE }}/djangojs.js"></script>
+
+  {% block extra_script %}
+  {% endblock %}
+
+  {% block extra_js %}
+  {% endblock %}
+
+  {% block extra_etc %}
+  {% endblock %}
 </html>
--- a/circle/dashboard/templates/crispy_forms/anytag.html
+++ b/circle/dashboard/templates/crispy_forms/anytag.html
--- a/circle/dashboard/templates/dashboard/_base.html
+++ b/circle/dashboard/templates/dashboard/_base.html
--- a/circle/dashboard/templates/dashboard/_disk-list-element.html
+++ b/circle/dashboard/templates/dashboard/_disk-list-element.html
 {% load i18n %}
 {% load sizefieldtags %}

-<i class="{% if d.is_downloading %}icon-refresh icon-spin{% else %}icon-file{% if d.failed %}" style="color: #d9534f;{% endif %}{% endif %}"></i> 
+<i class="fa {% if d.is_downloading %}fa-refresh fa-spin{% else %}fa-file{% if d.failed %}" style="color: #d9534f;{% endif %}{% endif %}"></i>
 {{ d.name }} (#{{ d.id }}) -
 {% if not d.is_downloading %}
  {% if not d.failed %}
@@ -14,6 +14,6 @@
  data-disk-pk="{{ d.pk }}" class="btn btn-xs btn-danger pull-right disk-remove"
  {% if not long_remove %}title="{% trans "Remove" %}"{% endif %}
  >
-  <i class="icon-remove"></i>{% if long_remove %} {% trans "Remove" %}{% endif %}
+  <i class="fa fa-times"></i>{% if long_remove %} {% trans "Remove" %}{% endif %}
 </a>
 <div style="clear: both;"></div>
--- a/circle/dashboard/templates/dashboard/_modal.html
+++ b/circle/dashboard/templates/dashboard/_modal.html
--- a/circle/dashboard/templates/dashboard/_notifications-timeline.html
+++ b/circle/dashboard/templates/dashboard/_notifications-timeline.html
@@ -2,7 +2,7 @@
 {% for n in notifications %}
  <li class="notification-message" id="msg-{{n.id}}">
    <span class="notification-message-subject">
-      {% if n.status == "new" %}<i class="icon-envelope-alt"></i> {% endif %}
+      {% if n.status == "new" %}<i class="fa fa-envelope-alt"></i> {% endif %}
      {{ n.subject.get_user_text }}
    </span>
    <span class="notification-message-date pull-right" title="{{n.created}}">

--- a/circle/dashboard/templates/dashboard/_template-create.html
+++ b/circle/dashboard/templates/dashboard/_template-create.html
--- a/circle/dashboard/templates/dashboard/_vm-create-1.html
+++ b/circle/dashboard/templates/dashboard/_vm-create-1.html
@@ -6,12 +6,12 @@
  <div class="vm-create-template">
    <div class="vm-create-template-summary">
      {{ t.name }}
-      <span class="pull-right"><i class="icon-{{ t.os_type }}"></i> {{ t.system }}</span>
+      <span class="pull-right"><i class="fa fa-{{ t.os_type }}"></i> {{ t.system }}</span>
    </div>
    <div class="vm-create-template-details">
      <ul>
        <li>
-          <i class="icon-gears"></i> {% trans "CPU" %}
+          <i class="fa fa-gears"></i> {% trans "CPU" %}
          <div class="progress pull-right">
            <div class="progress-bar progress-bar-success" role="progressbar"
              aria-valuenow="{{ t.num_cores }}" aria-valuemin="0" aria-valuemax="8" style="width: 80%">
@@ -20,7 +20,7 @@
          </div>
        </li>
        <li>
-          <i class="icon-ticket"></i> {% trans "Memory" %}
+          <i class="fa fa-ticket"></i> {% trans "Memory" %}
          <div class="progress pull-right">
            <div class="progress-bar progress-bar-info" role="progressbar"
              aria-valuenow="{{ t.ram_size }}" aria-valuemin="0" aria-valuemax="4096"
@@ -30,27 +30,27 @@
          </div>
        </li>
        <li>
-          <i class="icon-file"></i> {% trans "Disks" %} 
+          <i class="fa fa-file"></i> {% trans "Disks" %}
          <span style="float: right; text-align: right;">
            {% for d in t.disks.all %}{{ d.name }} ({% if d.size %}{{ d.size|filesize }}{% endif %}){% if not forloop.last %}, {% endif %}{% endfor %}
          </span>
          <div style="clear: both;"></div>
        </li>
        <li>
-          <i class="icon-globe"></i> {% trans "Network" %}
+          <i class="fa fa-globe"></i> {% trans "Network" %}
          <span style="float: right;">
            {% for i in t.interface_set.all %}{{ i.vlan.name }}{% if not forloop.last %}, {% endif %}{% endfor %}
          </span>
        </li>
        <li>
-          <i class="icon-tag"></i> {% trans "Type" %}: {{ t.lease.name }}
+          <i class="fa fa-tag"></i> {% trans "Type" %}: {{ t.lease.name }}
          <span style="float: right;">
-            <i class="icon-pause"></i> {{ t.lease.get_readable_suspend_time }}
-            <i class="icon-remove"></i> {{ t.lease.get_readable_delete_time }}
+            <i class="fa fa-pause"></i> {{ t.lease.get_readable_suspend_time }}
+            <i class="fa fa-times"></i> {{ t.lease.get_readable_delete_time }}
          </span>
        </li>
        <li>
-          <i class="icon-hand-right"></i> {% trans "Description" %}:
+          <i class="fa fa-hand-right"></i> {% trans "Description" %}:
          <span style="float: right; max-width: 350px;">
            {{ t.description }}
          </span>
@@ -59,13 +59,13 @@
      </ul>
      <div style="margin-top: 20px; padding: 0 15px; width: 100%">
        {% if perms.vm_set_resources %}
-        <a class="btn btn-primary btn-xs customize-vm" data-template-pk="{{ t.pk }}" href="{% url "dashboard.views.vm-create" %}?template={{ t.pk }}"><i class="icon-wrench"></i> {% trans "Customize" %}</a>
+        <a class="btn btn-primary btn-xs customize-vm" data-template-pk="{{ t.pk }}" href="{% url "dashboard.views.vm-create" %}?template={{ t.pk }}"><i class="fa fa-wrench"></i> {% trans "Customize" %}</a>
        {% endif %}
        <form class="pull-right text-right" method="POST" action="{% url "dashboard.views.vm-create" %}">
          {% csrf_token %}
          <input type="hidden" name="template" value="{{ t.pk }}"/>
          <button class="btn btn-success btn-xs vm-create-start" data-template-pk="{{ t.pk }}" type="submit">
-            <i class="icon-play"></i> {% trans "Start" %}
+            <i class="fa fa-play"></i> {% trans "Start" %}
          </button>
        </form>
        <div style="clear: both;"></div>

--- a/circle/dashboard/templates/dashboard/base.html
+++ b/circle/dashboard/templates/dashboard/base.html
@@ -2,3 +2,60 @@
 {% load i18n %}

 {% block title-site %}Dashboard | CIRCLE{% endblock %}
+
+
+{% block extra_link %}
+  <link rel="stylesheet" href="{{ STATIC_URL }}dashboard/bootstrap-slider/slider.css"/>
+  <link href="{{ STATIC_URL }}dashboard/bootstrap-tour.min.css" rel="stylesheet">
+  <link href="{{ STATIC_URL }}dashboard/dashboard.css" rel="stylesheet">
+{% endblock %}
+
+
+{% block navbar-brand %}
+  <a class="navbar-brand" href="{% url "dashboard.index" %}" style="padding: 10px 15px;">
+    <img src="{{ STATIC_URL}}dashboard/img/logo.png" style="height: 25px;"/>
+  </a>
+{% endblock %}
+
+{% block navbar %}
+
+<ul class="nav navbar-nav pull-right">
+  <li class="dropdown" id="notification-button">
+    <a href="{% url "dashboard.views.notifications" %}" style="color: white; font-size: 12px;"
+      class="dropdown-toggle" data-toggle="dropdown">
+      {% trans "Notifications" %}
+      {% if NEW_NOTIFICATIONS_COUNT > 0 %}
+        <span class="badge badge-pulse">{{ NEW_NOTIFICATIONS_COUNT }}</span>
+      {% endif %}
+    </a>
+    <ul class="dropdown-menu notification-messages">
+        <li>{% trans "Loading..." %}</li>
+    </ul>
+  </li>
+</ul>
+
+{% if user.is_authenticated and user.pk %}
+  <a class="navbar-brand pull-right" href="{% url "logout" %}?next={% url "login" %}" style="color: white; font-size: 10px;">
+    <i class="fa fa-sign-out"></i> {% trans "Log out" %}
+  </a>
+  <a class="navbar-brand pull-right" href="{% url "dashboard.views.profile-preferences" %}" title="{% trans "User profile" %}" style="color: white; font-size: 10px;">
+    <i class="fa fa-user"></i>
+    {% include "dashboard/_display-name.html" with user=user show_org=True %}
+  </a>
+
+  {% if user.is_superuser %}
+    <a class="navbar-brand pull-right" href="/network/" style="color: white; font-size: 10px;"><i class="fa fa-globe"></i> {% trans "Network" %}</a>
+    <a class="navbar-brand pull-right" href="/admin/" style="color: white; font-size: 10px;"><i class="fa fa-cogs"></i> {% trans "Admin" %}</a>
+  {% endif %}
+{% else %}
+  <a class="navbar-brand pull-right" href="{% url "login" %}?next={% url "dashboard.index" %}" style="color: white; font-size: 10px;"><i class="fa fa-sign-in"></i> {% trans "Log in " %}</a>
+{% endif %}
+
+{% endblock %}
+
+
+{% block extra_script %}
+  <script src="{{ STATIC_URL }}dashboard/js/jquery.knob.js"></script>
+  <script src="{{ STATIC_URL}}dashboard/bootstrap-slider/bootstrap-slider.js"></script>
+  <script src="{{ STATIC_URL }}dashboard/dashboard.js"></script>
+{% endblock %}
--- a/circle/dashboard/templates/dashboard/confirm/ajax-delete.html
+++ b/circle/dashboard/templates/dashboard/confirm/ajax-delete.html
--- a/circle/dashboard/templates/dashboard/confirm/ajax-node-flush.html
+++ b/circle/dashboard/templates/dashboard/confirm/ajax-node-flush.html
--- a/circle/dashboard/templates/dashboard/confirm/ajax-node-status.html
+++ b/circle/dashboard/templates/dashboard/confirm/ajax-node-status.html
--- a/circle/dashboard/templates/dashboard/confirm/ajax-remove.html
+++ b/circle/dashboard/templates/dashboard/confirm/ajax-remove.html
--- a/circle/dashboard/templates/dashboard/confirm/base-delete.html
+++ b/circle/dashboard/templates/dashboard/confirm/base-delete.html
--- a/circle/dashboard/templates/dashboard/confirm/mass-delete.html
+++ b/circle/dashboard/templates/dashboard/confirm/mass-delete.html
--- a/circle/dashboard/templates/dashboard/confirm/node-flush.html
+++ b/circle/dashboard/templates/dashboard/confirm/node-flush.html
--- a/circle/dashboard/templates/dashboard/confirm/node-status.html
+++ b/circle/dashboard/templates/dashboard/confirm/node-status.html
--- a/circle/dashboard/templates/dashboard/group-detail.html
+++ b/circle/dashboard/templates/dashboard/group-detail.html
@@ -6,9 +6,9 @@
 <div class="body-content">
  <div class="page-header">
    <div class="pull-right" style="padding-top: 15px;">
-      <a title="{% trans "Rename" %}" href="#" class="btn btn-default btn-xs group-details-rename-button"><i class="icon-pencil"></i></a>
-      <a title="{% trans "Delete" %}" data-group-pk="{{ group.pk }}" class="btn btn-default btn-xs real-link group-delete" href="{% url "dashboard.views.delete-group" pk=group.pk %}"><i class="icon-trash"></i></a>
-      <a title="{% trans "Help" %}" href="#" class="btn btn-default btn-xs group-details-help-button"><i class="icon-question"></i></a>
+      <a title="{% trans "Rename" %}" href="#" class="btn btn-default btn-xs group-details-rename-button"><i class="fa fa-pencil"></i></a>
+      <a title="{% trans "Delete" %}" data-group-pk="{{ group.pk }}" class="btn btn-default btn-xs real-link group-delete" href="{% url "dashboard.views.delete-group" pk=group.pk %}"><i class="fa fa-trash"></i></a>
+      <a title="{% trans "Help" %}" href="#" class="btn btn-default btn-xs group-details-help-button"><i class="fa fa-question"></i></a>
    </div>
   <h1>
      <div id="group-details-rename">
@@ -62,32 +62,32 @@
        {% for i in users %}
 	  <tr>
            <td>
-              <i class="icon-user"></i>
+              <i class="fa fa-user"></i>
            </td>
            <td>
              <a href="{% url "dashboard.views.profile" username=i.username %}" title="{{ i.username }}"
                >{% include "dashboard/_display-name.html" with user=i show_org=True %}</a>
            </td>
 	    <td>
-              <a data-group_pk="{{ group.pk }}" data-member_pk="{{i.pk}}" href="{% url "dashboard.views.remove-user" member_pk=i.pk group_pk=group.pk %}" class="real-link delete-from-group btn btn-link btn-xs"><i class="icon-remove"><span class="sr-only">{% trans "remove" %}</span></i></a>
+              <a data-group_pk="{{ group.pk }}" data-member_pk="{{i.pk}}" href="{% url "dashboard.views.remove-user" member_pk=i.pk group_pk=group.pk %}" class="real-link delete-from-group btn btn-link btn-xs"><i class="fa fa-times"><span class="sr-only">{% trans "remove" %}</span></i></a>
            </td>
          </tr>
        {% endfor %}
        {% for i in future_users %}
 	  <tr>
            <td>
-              <i class="icon-user text-muted"></i>
+              <i class="fa fa-user text-muted"></i>
            </td>
            <td> {{ i.org_id }} </td>
 	    <td>
              <a href="{% url "dashboard.views.remove-future-user" member_org_id=i.org_id group_pk=group.pk %}"
                  class="real-link btn-link btn-xs">
-                  <i class="icon-remove"><span class="sr-only">{% trans "remove" %}</span></i></a>
+                  <i class="fa fa-times"><span class="sr-only">{% trans "remove" %}</span></i></a>
            </td>
          </tr>
        {% endfor %}
        <tr>
-          <td><i class="icon-plus"></i></td>
+          <td><i class="fa fa-plus"></i></td>
          <td colspan="2">
            <input type="text" class="form-control" name="list-new-name"
            placeholder="{% trans "Name of user" %}">
@@ -115,7 +115,7 @@
    {% for i in acl.users %}
    <tr>
      <td>
-        <i class="icon-user"></i>
+        <i class="fa fa-user"></i>
      </td>
      <td>
        <a href="{% url "dashboard.views.profile" username=i.user.username %}" title="{{ i.user.username }}"
@@ -128,14 +128,14 @@
        {% endfor %}
        </select>
      </td>
-      <td class="user-remove"><a data-group_pk="{{ group.pk }}" data-member_pk="{{i.user.pk }}" href="{% url "dashboard.views.remove-acluser" member_pk=i.user.pk group_pk=group.pk %}" class="real-link delete-from-group btn btn-link btn-xs"><i class="icon-remove"><span class="sr-only">{% trans "remove" %}</span></i></a></td>
+      <td class="user-remove"><a data-group_pk="{{ group.pk }}" data-member_pk="{{i.user.pk }}" href="{% url "dashboard.views.remove-acluser" member_pk=i.user.pk group_pk=group.pk %}" class="real-link delete-from-group btn btn-link btn-xs"><i class="fa fa-times"><span class="sr-only">{% trans "remove" %}</span></i></a></td>
    </tr>
    {% endfor %}

    {% for i in acl.groups %}
      <tr>
        <td>
-          <i class="icon-group"></i>
+          <i class="fa fa-group"></i>
        </td>
        <td>
          <a href="{% url "dashboard.views.group-detail" pk=i.group.pk %}">{{ i.group }}</a>
@@ -147,12 +147,12 @@
          {% endfor %}
          </select>
        </td>
-        <td class="user-remove"><a data-group_pk="{{ i.pk }}"data-member_pk="{{i.group.pk }}" href="{% url "dashboard.views.remove-aclgroup" member_pk=i.group.pk group_pk=group.pk %}" class="real-link delete-from-group btn btn-link btn-xs"><i class="icon-remove"><span class="sr-only">{% trans "remove" %}</span></i></a>
+        <td class="user-remove"><a data-group_pk="{{ i.pk }}"data-member_pk="{{i.group.pk }}" href="{% url "dashboard.views.remove-aclgroup" member_pk=i.group.pk group_pk=group.pk %}" class="real-link delete-from-group btn btn-link btn-xs"><i class="fa fa-times"><span class="sr-only">{% trans "remove" %}</span></i></a>
        </td>
      </tr>
      {% endfor %}
      <tr>
-        <td><i class="icon-plus"></i></td>
+        <td><i class="fa fa-plus"></i></td>
        <td>
          <input type="text" class="form-control" name="perm-new-name"
          placeholder="{% trans "Name of group or user" %}">

--- a/circle/dashboard/templates/dashboard/group-list.html
+++ b/circle/dashboard/templates/dashboard/group-list.html
@@ -18,13 +18,13 @@
  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-heading">
-        <h3 class="no-margin"><i class="icon-group"></i> Your groups</h3>
+        <h3 class="no-margin"><i class="fa fa-group"></i> Your groups</h3>
      </div>
      <div class="panel-body group-list-group-control">
        <p>
          <strong>Group actions</strong>
          <button id="group-list-group-select-all" class="btn btn-info btn-xs">Select all</button>
-          <a id="group-list-group-delete" disabled href="#" class="btn btn-danger btn-xs"><i class="icon-remove"></i> Discard</a>
+          <a id="group-list-group-delete" disabled href="#" class="btn btn-danger btn-xs"><i class="fa fa-times"></i> Discard</a>
        </p>
 	</div>
 	<div id="table_container">

--- a/circle/dashboard/templates/dashboard/group-list/column-actions.html
+++ b/circle/dashboard/templates/dashboard/group-list/column-actions.html
-   <a data-group-pk="{{ record.pk }}" class="btn btn-danger btn-xs real-link group-delete" href="{% url "dashboard.views.delete-group" pk=record.pk %}?next={{ request.path }}"><i class="icon-trash"></i></a>
+   <a data-group-pk="{{ record.pk }}" class="btn btn-danger btn-xs real-link group-delete" href="{% url "dashboard.views.delete-group" pk=record.pk %}?next={{ request.path }}"><i class="fa fa-trash"></i></a>
--- a/circle/dashboard/templates/dashboard/group-list/column-admin.html
+++ b/circle/dashboard/templates/dashboard/group-list/column-admin.html
 <a id="group-list-rename-button" class="btn btn-default btn-xs" title data-original-title="Rename">
-  <i class="icon-pencil"></i>
+  <i class="fa fa-pencil"></i>
  </a>

--- a/circle/dashboard/templates/dashboard/group-list/column-name.html
+++ b/circle/dashboard/templates/dashboard/group-list/column-name.html
--- a/circle/dashboard/templates/dashboard/group-list/column-username.html
+++ b/circle/dashboard/templates/dashboard/group-list/column-username.html
--- a/circle/dashboard/templates/dashboard/group-list/column-users.html
+++ b/circle/dashboard/templates/dashboard/group-list/column-users.html
--- a/circle/dashboard/templates/dashboard/group-list/test-one.html
+++ b/circle/dashboard/templates/dashboard/group-list/test-one.html
@@ -10,10 +10,10 @@
              <td>1 month</td>
              <td>
                <a class="btn btn-default btn-xs" title data-original-title="Migrate">
-                  <i class="icon-truck"></i>
+                  <i class="fa fa-truck"></i>
                </a>
                <a class="btn btn-default btn-xs" title data-original-title="Rename">
-                  <i class="icon-pencil"></i>
+                  <i class="fa fa-pencil"></i>
                </a>
                <a href="#" class="btn btn-default btn-xs vm-list-connect" data-toggle="popover"
                  data-content='
@@ -39,11 +39,11 @@
              </td>
              <td>
                <div class="btn-group">
-                  <button type="button" class="btn btn-xs btn-warning nojs-dropdown-toogle dropdown-toggle" data-toggle="dropdown">Action <i class="icon-caret-down"></i></button>
+                  <button type="button" class="btn btn-xs btn-warning nojs-dropdown-toogle dropdown-toggle" data-toggle="dropdown">Action <i class="fa fa-caret-down"></i></button>
                  <ul class="nojs-dropdown-menu dropdown-menu" role="menu">
-                    <li><a href="#"><i class="icon-refresh"></i> Reboot</a></li>
-                    <li><a href="#"><i class="icon-off"></i> Shutdown</a></li>
-                    <li><a href="#"><i class="icon-remove"></i> Discard</a></li>
+                    <li><a href="#"><i class="fa fa-refresh"></i> Reboot</a></li>
+                    <li><a href="#"><i class="fa fa-off"></i> Shutdown</a></li>
+                    <li><a href="#"><i class="fa fa-times"></i> Discard</a></li>
                  </ul>
                </div>
              </td>

--- a/circle/dashboard/templates/dashboard/index-files.html
+++ b/circle/dashboard/templates/dashboard/index-files.html
 <div class="panel panel-default">
  <div class="panel-heading">
    <ul class="list-inline pull-right">
-      <li><a href="#vm-graph-view" class="btn btn-default btn-xs"><i class="icon-dashboard"></i></a></li>
-      <li><a href="#vm-list-view" class="btn btn-default btn-xs"><i class="icon-list"></i></a></li>
+      <li><a href="#vm-graph-view" class="btn btn-default btn-xs"><i class="fa fa-dashboard"></i></a></li>
+      <li><a href="#vm-list-view" class="btn btn-default btn-xs"><i class="fa fa-list"></i></a></li>
    </ul>
-    <h3 class="no-margin"><i class="icon-briefcase"></i> Files
+    <h3 class="no-margin"><i class="fa fa-briefcase"></i> Files
    </h3>
  </div>
  <div class="list-group" id="vm-list-view">
    <a href="#" class="list-group-item">
-      <i class="icon-file"></i> ALMA <div class="pull-right"><i class="icon-download-alt "></i></div>
+      <i class="fa fa-file"></i> ALMA <div class="pull-right"><i class="fa fa-download-alt "></i></div>
    </a>
    <a href="#" class="list-group-item">
-      <i class="icon-file-text"></i> ALMA.docx <div class="pull-right"><i class="icon-download-alt "></i></div>
+      <i class="fa fa-file-text"></i> ALMA.docx <div class="pull-right"><i class="fa fa-download-alt "></i></div>
    </a>
    <a href="#" class="list-group-item">
-      <i class="icon-file-text"></i> ALMA.docx <div class="pull-right"><i class="icon-download-alt "></i></div>
+      <i class="fa fa-file-text"></i> ALMA.docx <div class="pull-right"><i class="fa fa-download-alt "></i></div>
    </a>
    <a href="#" class="list-group-item">
-      <i class="icon-file-text"></i> ALMA.docx <div class="pull-right"><i class="icon-download-alt "></i></div>
+      <i class="fa fa-file-text"></i> ALMA.docx <div class="pull-right"><i class="fa fa-download-alt "></i></div>
    </a>
    <a href="#" class="list-group-item">
-      <i class="icon-file-text"></i> ALMA.docx <div class="pull-right"><i class="icon-download-alt "></i></div>
+      <i class="fa fa-file-text"></i> ALMA.docx <div class="pull-right"><i class="fa fa-download-alt "></i></div>
    </a>
    <div href="#" class="list-group-item list-group-footer text-right">
      <p>
-        <a class="btn btn-primary btn-xs"><i class="icon-chevron-sign-right"></i> show more  </a>
-        <a class="btn btn-success btn-xs"><i class="icon-upload-alt"></i> upload  </a>
+        <a class="btn btn-primary btn-xs"><i class="fa fa-chevron-circle-right"></i> show more  </a>
+        <a class="btn btn-success btn-xs"><i class="fa fa-upload-alt"></i> upload  </a>
      </p>
    </div>
  </div>

--- a/circle/dashboard/templates/dashboard/index-groups.html
+++ b/circle/dashboard/templates/dashboard/index-groups.html
@@ -2,16 +2,16 @@
 <div class="panel panel-default">
  <div class="panel-heading">
    <div class="pull-right toolbar">
-      <span class="btn btn-default btn-xs infobtn" title="{% trans "List of groups that you have access to." %}"><i class="icon-info-sign"></i></span>
+      <span class="btn btn-default btn-xs infobtn" title="{% trans "List of groups that you have access to." %}"><i class="fa fa-info-circle"></i></span>
    </div>
-    <h3 class="no-margin"><i class="icon-group"></i> {% trans "Groups" %}</h3>
+    <h3 class="no-margin"><i class="fa fa-group"></i> {% trans "Groups" %}</h3>
  </div>
  <div class="list-group" id="vm-list-view">
    <div id="dashboard-group-list">
      {% for i in groups %}
      <a href="{% url "dashboard.views.group-detail" pk=i.pk %}" class="list-group-item real-link
      {% if forloop.last and groups|length < 5 %} list-group-item-last{% endif %}">
-        <i class="icon-group"></i> {{ i.name }}
+        <i class="fa fa-group"></i> {{ i.name }}
      </a>
      {% endfor %}
    </div>
@@ -20,12 +20,12 @@
        <div class="col-sm-6 col-xs-6 input-group input-group-sm">
          <input id="dashboard-group-search-input" type="text" class="form-control" placeholder="{% trans "Search..." %}" />
          <div class="input-group-btn">
-            <button type="submit" class="form-control btn btn-primary"><i class="icon-search"></i></button>
+            <button type="submit" class="form-control btn btn-primary"><i class="fa fa-search"></i></button>
          </div>
        </div>
        <div class="col-sm-6 text-right">
          <a class="btn btn-primary btn-xs" href="{% url "dashboard.views.group-list" %}">
-            <i class="icon-chevron-sign-right"></i> 
+            <i class="fa fa-chevron-circle-right"></i>
 	    {% if more_groups > 0 %}
              {% blocktrans count more=more_groups %}
                <strong>{{ more }}</strong>  more
@@ -36,7 +36,7 @@
              {% trans "list" %}
            {% endif %}
          </a>
-          <a class="btn btn-success btn-xs group-create" href="{% url "dashboard.views.group-create" %}"><i class="icon-plus-sign"></i> {% trans "new" %} </a>
+          <a class="btn btn-success btn-xs group-create" href="{% url "dashboard.views.group-create" %}"><i class="fa fa-plus-circle"></i> {% trans "new" %} </a>
        </div>
      </div>
    </div>

--- a/circle/dashboard/templates/dashboard/index-nodes.html
+++ b/circle/dashboard/templates/dashboard/index-nodes.html
@@ -3,14 +3,14 @@
  <div class="panel-heading">
    <div class="pull-right toolbar">
      <div class="btn-group">
-        <a href="#index-graph-view" data-index-box="node" class="btn btn-default btn-xs"><i class="icon-dashboard"></i></a>
-        <a href="#index-list-view" data-index-box="node" class="btn btn-default btn-xs disabled"><i class="icon-list"></i></a>
+        <a href="#index-graph-view" data-index-box="node" class="btn btn-default btn-xs"><i class="fa fa-dashboard"></i></a>
+        <a href="#index-list-view" data-index-box="node" class="btn btn-default btn-xs disabled"><i class="fa fa-list"></i></a>

      </div>
-      <span class="btn btn-default btn-xs infobtn" title="{% trans "List of compute nodes, also called worker nodes or hypervisors, which run the virtual machines." %}"><i class="icon-info-sign"></i></span>
+      <span class="btn btn-default btn-xs infobtn" title="{% trans "List of compute nodes, also called worker nodes or hypervisors, which run the virtual machines." %}"><i class="fa fa-info-circle"></i></span>
    </div>
    <h3 class="no-margin">
-      <i class="icon-sitemap"></i> {% trans "Nodes" %}
+      <i class="fa fa-sitemap"></i> {% trans "Nodes" %}
    </h3>
  </div >
  <div class="list-group" id="node-list-view">
@@ -19,7 +19,7 @@
      <a href="{{ i.get_absolute_url }}" class="list-group-item real-link
        {% if forloop.last and nodes|length < 5 %} list-group-item-last{% endif %}">
        <span class="index-node-list-name">
-          <i class="{{ i.get_status_icon }}" title="{{ i.get_status_display }}"></i>
+          <i class="fa {{ i.get_status_icon }}" title="{{ i.get_status_display }}"></i>
           {{ i.name }}
        </span>
        <div style="clear: both;"></div>
@@ -31,19 +31,19 @@
        <div class="col-sm-6 col-xs-6 input-group input-group-sm">
          <input id="dashboard-node-search-input" type="text" class="form-control" placeholder="{% trans "Search..." %}" />
          <div class="input-group-btn">
-            <button type="submit" class="form-control btn btn-primary" title="search"><i class="icon-search"></i></button>
+            <button type="submit" class="form-control btn btn-primary" title="search"><i class="fa fa-search"></i></button>
          </div>
        </div>
        <div class="col-sm-6 text-right">
          <a class="btn btn-primary btn-xs" href="{% url "dashboard.views.node-list" %}">
-            <i class="icon-chevron-sign-right"></i>
+            <i class="fa fa-chevron-circle-right"></i>
            {% if more_nodes > 0 %}
                {% blocktrans with count=more_nodes %}<strong>{{count}}</strong>  more{% endblocktrans %}
            {% else %}
                {% trans "list" %}
            {% endif %}
          </a>
-          <a class="btn btn-success btn-xs node-create" href="{% url "dashboard.views.node-create" %}"><i class="icon-plus-sign"></i> {% trans "new" %}</a>
+          <a class="btn btn-success btn-xs node-create" href="{% url "dashboard.views.node-create" %}"><i class="fa fa-plus-circle"></i> {% trans "new" %}</a>
        </div>
      </div>
    </div>
@@ -56,7 +56,7 @@
      <ul class="list-inline" id="dashboard-node-taglist">
        {% for i in nodes %}
        <a href="{{ i.get_absolute_url }}" class="label {{i.get_status_label}}" >
-        <i class="{{ i.get_status_icon }}" title="{{ i.get_status_display }}"></i> {{ i.name }}</a>
+        <i class="fa {{ i.get_status_icon }}" title="{{ i.get_status_display }}"></i> {{ i.name }}</a>
        {% endfor %}
      </ul>

@@ -65,10 +65,10 @@
        <div class="col-sm-6 text-right pull-right">
         {% if more_nodes >= 0  %}
          <a class="btn btn-primary btn-xs" href="{% url "dashboard.views.node-list" %}">
-            <i class="icon-chevron-sign-right"></i> {% blocktrans with count=more_nodes %}<strong>{{count}}</strong>  more{% endblocktrans %}
+            <i class="fa fa-chevron-circle-right"></i> {% blocktrans with count=more_nodes %}<strong>{{count}}</strong>  more{% endblocktrans %}
          </a>
         {% endif %}
-         <a class="btn btn-success btn-xs node-create" href="{% url "dashboard.views.node-create" %}"><i class="icon-plus-sign"></i> {% trans "new" %}</a>
+         <a class="btn btn-success btn-xs node-create" href="{% url "dashboard.views.node-create" %}"><i class="fa fa-plus-circle"></i> {% trans "new" %}</a>
        </div>
 </div>
 </div>

--- a/circle/dashboard/templates/dashboard/index-templates.html
+++ b/circle/dashboard/templates/dashboard/index-templates.html
@@ -2,9 +2,9 @@
 <div class="panel panel-default">
  <div class="panel-heading">
    <span class="btn btn-default btn-xs infobtn pull-right" title="{% trans "List of VM templates that are available for you. You can create new ones from scratch or customize existing ones (preferred)." %}">
-      <i class="icon-info-sign"></i>
+      <i class="fa fa-info-circle"></i>
    </span>
-    <h3 class="no-margin"><i class="icon-puzzle-piece"></i> {% trans "Templates" %}
+    <h3 class="no-margin"><i class="fa fa-puzzle-piece"></i> {% trans "Templates" %}
    </h3>
  </div>
  <div class="list-group" id="dashboard-template-list">
@@ -13,10 +13,10 @@
      <a href="{% url "dashboard.views.template-detail" pk=t.pk %}" class="list-group-item
        {% if forloop.last and templates|length < 5 %} list-group-item-last{% endif %}">
        <span class="index-template-list-name">
-          <i class="icon-{{ t.os_type }}"></i> {{ t.name }} 
+          <i class="fa fa-{{ t.os_type }}"></i> {{ t.name }}
        </span>
        <small class="text-muted index-template-list-system">{{ t.system }}</small>
-        <div class="pull-right vm-create" data-template="{{ t.pk }}"><i title="{% trans "Start vm instance" %}" class="icon-play"></i></div>
+        <div class="pull-right vm-create" data-template="{{ t.pk }}"><i title="{% trans "Start vm instance" %}" class="fa fa-play"></i></div>
        <div class="clearfix"></div>
      </a>
      {% empty %}
@@ -30,10 +30,10 @@
    <div href="#" class="list-group-item list-group-footer text-right">
      <p>
        <a href="{% url "dashboard.views.template-list" %}" class="btn btn-primary btn-xs">
-          <i class="icon-chevron-sign-right"></i> {% trans "show all" %}
+          <i class="fa fa-chevron-circle-right"></i> {% trans "show all" %}
        </a>
        <a href="{% url "dashboard.views.template-choose" %}" class="btn btn-success btn-xs template-choose">
-          <i class="icon-plus-sign"></i> {% trans "new" %}
+          <i class="fa fa-plus-circle"></i> {% trans "new" %}
        </a>
      </p>
    </div>

--- a/circle/dashboard/templates/dashboard/index-vm.html
+++ b/circle/dashboard/templates/dashboard/index-vm.html
@@ -3,13 +3,13 @@
  <div class="panel-heading">
    <div class="pull-right toolbar">
      <div class="btn-group">
-        <a href="#index-graph-view" data-index-box="vm" class="btn btn-default btn-xs"><i class="icon-dashboard"></i></a>
-        <a href="#index-list-view" data-index-box="vm" class="btn btn-default btn-xs disabled"><i class="icon-list"></i></a>
+        <a href="#index-graph-view" data-index-box="vm" class="btn btn-default btn-xs"><i class="fa fa-dashboard"></i></a>
+        <a href="#index-list-view" data-index-box="vm" class="btn btn-default btn-xs disabled"><i class="fa fa-list"></i></a>
      </div>
-      <span class="btn btn-default btn-xs infobtn" title="{% trans "List of your current virtual machines. Favourited ones are ahead of others." %}"><i class="icon-info-sign"></i></span>
+      <span class="btn btn-default btn-xs infobtn" title="{% trans "List of your current virtual machines. Favourited ones are ahead of others." %}"><i class="fa fa-info-circle"></i></span>
    </div>
    <h3 class="no-margin">
-      <i class="icon-desktop"></i> {% trans "Virtual machines" %}
+      <i class="fa fa-desktop"></i> {% trans "Virtual machines" %}
    </h3>
  </div>
  <div class="list-group" id="vm-list-view">
@@ -18,15 +18,15 @@
      <a href="{{ i.get_absolute_url }}" class="list-group-item
        {% if forloop.last and instances|length < 5 %} list-group-item-last{% endif %}">
        <span class="index-vm-list-name">
-          <i class="{{ i.get_status_icon }}" title="{{ i.get_status_display }}"></i>
+          <i class="fa {{ i.get_status_icon }}" title="{{ i.get_status_display }}"></i>
          {{ i.name }}
        </span>
        <small class="text-muted"> {{ i.primary_host.hostname }}</small>
        <div class="pull-right dashboard-vm-favourite" data-vm="{{ i.pk }}">
          {% if i.fav %}
-            <i class="icon-star text-primary title-favourite" title="{% trans "Unfavourite" %}"></i>
+            <i class="fa fa-star text-primary title-favourite" title="{% trans "Unfavourite" %}"></i>
          {% else %}
-            <i class="icon-star-empty text-primary title-favourite" title="{% trans "Mark as favorite" %}"></i>
+            <i class="fa fa-star-o text-primary title-favourite" title="{% trans "Mark as favorite" %}"></i>
          {% endif %}
        </div>
      <div style="clear: both;"></div>
@@ -47,12 +47,12 @@
        <div class="col-sm-6 col-xs-6 input-group input-group-sm">
          <input id="dashboard-vm-search-input" type="text" class="form-control" placeholder="{% trans "Search..." %}" />
          <div class="input-group-btn">
-            <button type="submit" class="form-control btn btn-primary"><i class="icon-search"></i></button>
+            <button type="submit" class="form-control btn btn-primary"><i class="fa fa-search"></i></button>
          </div>
        </div>
        <div class="col-sm-6 text-right">
          <a class="btn btn-primary btn-xs" href="{% url "dashboard.views.vm-list" %}">
-            <i class="icon-chevron-sign-right"></i>
+            <i class="fa fa-chevron-circle-right"></i>
            {% if more_instances > 0 %}
            {% blocktrans count counter=more_instances %}
              <strong>{{ counter }}</strong>  more
@@ -63,7 +63,7 @@
              {% trans "list" %}
            {% endif %}
          </a>
-          <a class="btn btn-success btn-xs vm-create" href="{% url "dashboard.views.vm-create" %}"><i class="icon-plus-sign"></i> {% trans "new" %}</a>
+          <a class="btn btn-success btn-xs vm-create" href="{% url "dashboard.views.vm-create" %}"><i class="fa fa-plus-circle"></i> {% trans "new" %}</a>
        </div>
      </div>
    </div>
@@ -77,7 +77,7 @@
        {% for vm in running_vms %}
        <li style="display: inline-block; padding: 2px;">
          <a href="{{vm.get_absolute_url}}" title="{{vm.primary_host.get_fqdn}}"  class="label label-success">
-            <i class="{{vm.get_status_icon}}"></i> {{vm.name}}
+            <i class="fa {{vm.get_status_icon}}"></i> {{vm.name}}
          </a>
        </li>
        {% endfor %}
@@ -87,7 +87,7 @@
    <div class="clearfix"></div>
    <div>
      <a style="float: right; margin-top: 17px;" href="{% url "dashboard.views.vm-list" %}" class="btn btn-primary btn-xs">
-        <i class="icon-chevron-sign-right"></i> 
+        <i class="fa fa-chevron-circle-right"></i>
        {% blocktrans count counter=instances|length|add:more_instances %}
          <strong>{{ counter }}</strong> machine total
          {% plural %}

--- a/circle/dashboard/templates/dashboard/index.html
+++ b/circle/dashboard/templates/dashboard/index.html
--- a/circle/dashboard/templates/dashboard/lease-create.html
+++ b/circle/dashboard/templates/dashboard/lease-create.html
@@ -11,7 +11,7 @@
    <div class="panel panel-default">
      <div class="panel-heading">
        <a class="pull-right btn btn-default btn-xs" href="{% url "dashboard.views.template-list" %}">{% trans "Back" %}</a>
-        <h3 class="no-margin"><i class="icon-time"></i> {% trans "Create lease" %}</h3>
+        <h3 class="no-margin"><i class="fa fa-time"></i> {% trans "Create lease" %}</h3>
      </div>
      <div class="panel-body">
        {% with form=form %}

--- a/circle/dashboard/templates/dashboard/lease-edit.html
+++ b/circle/dashboard/templates/dashboard/lease-edit.html
@@ -10,7 +10,7 @@
    <div class="panel panel-default">
      <div class="panel-heading">
        <a class="pull-right btn btn-default btn-xs" href="{% url "dashboard.views.template-list" %}">{% trans "Back" %}</a>
-        <h3 class="no-margin"><i class="icon-time"></i> {% trans "Edit lease" %}</h3>
+        <h3 class="no-margin"><i class="fa fa-time"></i> {% trans "Edit lease" %}</h3>
      </div>
      <div class="panel-body">
        {% with form=form %}

--- a/circle/dashboard/templates/dashboard/modal-wrapper.html
+++ b/circle/dashboard/templates/dashboard/modal-wrapper.html
--- a/circle/dashboard/templates/dashboard/node-add-trait.html
+++ b/circle/dashboard/templates/dashboard/node-add-trait.html
@@ -16,7 +16,7 @@
  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-heading">
-	      <h3 class="no-margin"><i class="icon-plus"></i> {% trans "Add Trait" %}</h3>
+	      <h3 class="no-margin"><i class="fa fa-plus"></i> {% trans "Add Trait" %}</h3>
      </div>
      <div class="panel-body">
        {% with form=form %}

--- a/circle/dashboard/templates/dashboard/node-detail.html
+++ b/circle/dashboard/templates/dashboard/node-detail.html
@@ -7,12 +7,12 @@
 <div class="body-content">
  <div class="page-header">
     <div class="pull-right" style="padding-top: 15px;">
-      <a title="{% trans "Rename" %}" href="#" class="btn btn-default btn-xs node-details-rename-button"><i class="icon-pencil"></i></a>
-      <a title="{% trans "Flush" %}" data-node-pk="{{ node.pk }}" class="btn btn-default btn-xs real-link node-flush" href="{% url "dashboard.views.flush-node" pk=node.pk %}"><i class="icon-cloud-upload"></i></a>
-      <a title="{% trans "Enable" %}" style="display:{% if node.enabled %}none{% else %}inline-block{% endif %}" data-node-pk="{{ node.pk }}" class="btn btn-default btn-xs real-link node-enable" href="{% url "dashboard.views.status-node" pk=node.pk %}?next={{ request.path }}"><i class="icon-check"></i></a>
-      <a title="{% trans "Disable" %}" style="display:{% if not node.enabled %}none{% else %}inline-block{% endif %}" data-node-pk="{{ node.pk }}" class="btn btn-default btn-xs real-link node-enable" href="{% url "dashboard.views.status-node" pk=node.pk %}?next={{ request.path }}"><i class="icon-ban-circle"></i></a>
-      <a title="{% trans "Delete" %}" data-node-pk="{{ node.pk }}" class="btn btn-default btn-xs real-link node-delete" href="{% url "dashboard.views.delete-node" pk=node.pk %}"><i class="icon-trash"></i></a>
-      <a title="{% trans "Help" %}" href="#" class="btn btn-default btn-xs node-details-help-button"><i class="icon-question"></i></a>
+      <a title="{% trans "Rename" %}" href="#" class="btn btn-default btn-xs node-details-rename-button"><i class="fa fa-pencil"></i></a>
+      <a title="{% trans "Flush" %}" data-node-pk="{{ node.pk }}" class="btn btn-default btn-xs real-link node-flush" href="{% url "dashboard.views.flush-node" pk=node.pk %}"><i class="fa fa-cloud-upload"></i></a>
+      <a title="{% trans "Enable" %}" style="display:{% if node.enabled %}none{% else %}inline-block{% endif %}" data-node-pk="{{ node.pk }}" class="btn btn-default btn-xs real-link node-enable" href="{% url "dashboard.views.status-node" pk=node.pk %}?next={{ request.path }}"><i class="fa fa-check"></i></a>
+      <a title="{% trans "Disable" %}" style="display:{% if not node.enabled %}none{% else %}inline-block{% endif %}" data-node-pk="{{ node.pk }}" class="btn btn-default btn-xs real-link node-enable" href="{% url "dashboard.views.status-node" pk=node.pk %}?next={{ request.path }}"><i class="fa fa-ban"></i></a>
+      <a title="{% trans "Delete" %}" data-node-pk="{{ node.pk }}" class="btn btn-default btn-xs real-link node-delete" href="{% url "dashboard.views.delete-node" pk=node.pk %}"><i class="fa fa-trash-o"></i></a>
+      <a title="{% trans "Help" %}" href="#" class="btn btn-default btn-xs node-details-help-button"><i class="fa fa-question"></i></a>
    </div>
   <h1>
      <div id="node-details-rename">
@@ -66,19 +66,19 @@
        <ul class="nav nav-pills panel-heading">
          <li class="active">
            <a href="#home" data-toggle="pill" class="text-center">
-              <i class="icon-compass icon-2x"></i><br>
+              <i class="fa fa-compass fa-2x"></i><br>
              {% trans "Home" %}</a></li>
          <li>
            <a href="#resources" data-toggle="pill" class="text-center">
-              <i class="icon-tasks icon-2x"></i><br>
+              <i class="fa fa-tasks fa-2x"></i><br>
              {% trans "Resources" %}</a></li>
 	  <li>
            <a href="#virtualmachines" data-toggle="pill" class="text-center">
-              <i class="icon-desktop icon-2x"></i><br>
+              <i class="fa fa-desktop fa-2x"></i><br>
              {% trans "Virtual Machines" %}</a></li>
 	  <li>
            <a href="#activity" data-toggle="pill" class="text-center">
-              <i class="icon-time icon-2x"></i><br>
+              <i class="fa fa-clock-o fa-2x"></i><br>
              {% trans "Activity" %}</a></li>
 	</ul>


--- a/circle/dashboard/templates/dashboard/node-detail/_activity-timeline.html
+++ b/circle/dashboard/templates/dashboard/node-detail/_activity-timeline.html
@@ -3,7 +3,7 @@
 {% for a in activities %}
 <div class="activity" data-activity-id="{{ a.pk }}">
  <span class="timeline-icon{% if a.has_failed %} timeline-icon-failed{% endif %}">
-  <i class="{% if not a.finished %} icon-refresh icon-spin {% else %}icon-plus{% endif %}"></i>
+  <i class="fa{% if not a.finished %}fa-refresh fa-spin {% else %}fa fa-plus{% endif %}"></i>
 </span>
 <strong>{{ a.readable_name.get_user_text }}</strong>
 {{ a.started|date:"Y-m-d H:i" }}, {{ a.user }}
@@ -15,7 +15,7 @@
        {% if s.finished %}
          {{ s.finished|time:"H:i:s" }}
        {% else %}
-          <i class="icon-refresh icon-spin" class="sub-activity-loading-icon"></i>
+          <i class="fa fa-refresh fa-spin" class="sub-activity-loading-icon"></i>
        {% endif %}
        {% if s.has_failed %}
          <div class="label label-danger">{% trans "failed" %}</div>

--- a/circle/dashboard/templates/dashboard/node-detail/home.html
+++ b/circle/dashboard/templates/dashboard/node-detail/home.html
@@ -8,7 +8,7 @@
          {% for t in node.traits.all %}
            <div class="label label-success label-tag" style="display: inline-block">
              {{ t }}
-	      <a data-trait-pk="{{ t.pk }}" href="#" class="node-details-remove-trait"><i class="icon-remove"></i></a>
+	      <a data-trait-pk="{{ t.pk }}" href="#" class="node-details-remove-trait"><i class="fa fa-times"></i></a>
            </div>
          {% endfor %}
        {% else %}

--- a/circle/dashboard/templates/dashboard/node-detail/vm.html
+++ b/circle/dashboard/templates/dashboard/node-detail/vm.html
--- a/circle/dashboard/templates/dashboard/node-list.html
+++ b/circle/dashboard/templates/dashboard/node-list.html
@@ -10,7 +10,7 @@
  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-heading">
-        <h3 class="no-margin"><i class="icon-desktop"></i> {% trans "Compute nodes" %}</h3>
+        <h3 class="no-margin"><i class="fa fa-desktop"></i> {% trans "Compute nodes" %}</h3>
      </div>
 	<div id="table_container">
 	

--- a/circle/dashboard/templates/dashboard/node-list/column-actions.html
+++ b/circle/dashboard/templates/dashboard/node-list/column-actions.html
 {% load i18n %}
 <div class="btn-group">
-	<button type="button" class="btn {{ btn_size }} btn-warning nojs-dropdown-toogle dropdown-toggle" data-toggle="dropdown">Action <i class="icon-caret-down"></i></button>
+	<button type="button" class="btn {{ btn_size }} btn-warning nojs-dropdown-toogle dropdown-toggle" data-toggle="dropdown">Action <i class="fa fa-caret-down"></i></button>
  <ul class="dropdown-menu nojs-dropdown-toogle" role="menu">
- <li><a href="#" class="node-details-rename-button"><i class="icon-pencil"></i> {% trans "Rename" %}</a></li>
- <li><a data-node-pk="{{ record.pk }}" class="real-link node-flush" href="{% url "dashboard.views.flush-node" pk=record.pk %}"><i class="icon-cloud-upload"></i>{% trans "Flush" %}</a>
-    <li><a style={% if record.enabled %}"display:none"{% else %}"display:block"{% endif %} data-node-pk="{{ record.pk }}" class="real-link node-enable" href="{% url "dashboard.views.status-node" pk=record.pk %}?next={{ request.path }}"><i class="icon-check"></i>{% trans "Enable" %}</a>
-  <a style={% if record.enabled %}"display:block"{% else %}"display:none"{% endif %} data-node-pk="{{ record.pk }}" class="real-link node-enable" href="{% url "dashboard.views.status-node" pk=record.pk %}?next={{ request.path }}"><i class="icon-remove"></i>{% trans "Disable" %}</a></li>
-  <li><a data-node-pk="{{ record.pk }}" class="real-link node-delete" href="{% url "dashboard.views.delete-node" pk=record.pk %}?next={{ request.path }}"><i class="icon-trash"></i>{% trans "Delete" %}</a></li>
+ <li><a href="#" class="node-details-rename-button"><i class="fa fa-pencil"></i> {% trans "Rename" %}</a></li>
+ <li><a data-node-pk="{{ record.pk }}" class="real-link node-flush" href="{% url "dashboard.views.flush-node" pk=record.pk %}"><i class="fa fa-cloud-upload"></i>{% trans "Flush" %}</a>
+    <li><a style={% if record.enabled %}"display:none"{% else %}"display:block"{% endif %} data-node-pk="{{ record.pk }}" class="real-link node-enable" href="{% url "dashboard.views.status-node" pk=record.pk %}?next={{ request.path }}"><i class="fa fa-check"></i>{% trans "Enable" %}</a>
+  <a style={% if record.enabled %}"display:block"{% else %}"display:none"{% endif %} data-node-pk="{{ record.pk }}" class="real-link node-enable" href="{% url "dashboard.views.status-node" pk=record.pk %}?next={{ request.path }}"><i class="fa fa-times"></i>{% trans "Disable" %}</a></li>
+  <li><a data-node-pk="{{ record.pk }}" class="real-link node-delete" href="{% url "dashboard.views.delete-node" pk=record.pk %}?next={{ request.path }}"><i class="fa fa-trash"></i>{% trans "Delete" %}</a></li>
    </ul>
 </div>
--- a/circle/dashboard/templates/dashboard/node-list/column-admin.html
+++ b/circle/dashboard/templates/dashboard/node-list/column-admin.html
 {% load i18n %}
 <a class="btn btn-default btn-xs" title="{% trans "Flush" %}">
-<i class="icon-cloud-upload"></i>
+<i class="fa fa-cloud-upload"></i>
 </a>
 <a id="node-list-rename-button" class="btn btn-default btn-xs" title="{% trans "Rename" %}">
-  <i class="icon-pencil"></i>
+  <i class="fa fa-pencil"></i>
 </a>
--- a/circle/dashboard/templates/dashboard/node-list/column-monitor.html
+++ b/circle/dashboard/templates/dashboard/node-list/column-monitor.html
 {% load sizefieldtags %}
 {% load i18n %}

-<i class="icon-gears"></i> {% trans "CPU" %}
+<i class="fa fa-gears"></i> {% trans "CPU" %}
 <div class="progress pull-right">
  <div class="progress-bar progress-bar-success" role="progressbar"
    aria-valuenow="{{ record.cpu_usage|stringformat:"f" }}"
@@ -17,7 +17,7 @@
  </div>
 </div>
 <br>
-<i class="icon-ticket"></i> {% trans "Memory" %}
+<i class="fa fa-ticket"></i> {% trans "Memory" %}
 <div class="progress pull-right">
  <div class="progress-bar" role="progressbar"
    aria-valuenow="{{ record.ram_usage|stringformat:"f" }}"

--- a/circle/dashboard/templates/dashboard/node-list/column-name.html
+++ b/circle/dashboard/templates/dashboard/node-list/column-name.html
--- a/circle/dashboard/templates/dashboard/node-list/column-vm.html
+++ b/circle/dashboard/templates/dashboard/node-list/column-vm.html
--- a/circle/dashboard/templates/dashboard/node-list/test-one.html
+++ b/circle/dashboard/templates/dashboard/node-list/test-one.html
@@ -10,10 +10,10 @@
              <td>1 month</td>
              <td>
                <a class="btn btn-default btn-xs" title data-original-title="Migrate">
-                  <i class="icon-truck"></i>
+                  <i class="fa fa-truck"></i>
                </a>
                <a class="btn btn-default btn-xs" title data-original-title="Rename">
-                  <i class="icon-pencil"></i>
+                  <i class="fa fa-pencil"></i>
                </a>
                <a href="#" class="btn btn-default btn-xs vm-list-connect" data-toggle="popover"
                  data-content='
@@ -39,11 +39,11 @@
              </td>
              <td>
                <div class="btn-group">
-                  <button type="button" class="btn btn-xs btn-warning nojs-dropdown-toogle dropdown-toggle" data-toggle="dropdown">Action <i class="icon-caret-down"></i></button>
+                  <button type="button" class="btn btn-xs btn-warning nojs-dropdown-toogle dropdown-toggle" data-toggle="dropdown">Action <i class="fa fa-caret-down"></i></button>
                  <ul class="nojs-dropdown-menu dropdown-menu" role="menu">
-                    <li><a href="#"><i class="icon-refresh"></i> Reboot</a></li>
-                    <li><a href="#"><i class="icon-off"></i> Shutdown</a></li>
-                    <li><a href="#"><i class="icon-remove"></i> Discard</a></li>
+                    <li><a href="#"><i class="fa fa-refresh"></i> Reboot</a></li>
+                    <li><a href="#"><i class="fa fa-off"></i> Shutdown</a></li>
+                    <li><a href="#"><i class="fa fa-times"></i> Discard</a></li>
                  </ul>
                </div>
              </td>

--- a/circle/dashboard/templates/dashboard/notifications.html
+++ b/circle/dashboard/templates/dashboard/notifications.html
@@ -6,7 +6,7 @@
  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-heading">
-        <h3 class="no-margin"><i class="icon-desktop"></i> {% trans "Notifications" %}</h3>
+        <h3 class="no-margin"><i class="fa fa-desktop"></i> {% trans "Notifications" %}</h3>
      </div>
      <div class="panel-body">
        <ul style="list-style: none;">

--- a/circle/dashboard/templates/dashboard/operate.html
+++ b/circle/dashboard/templates/dashboard/operate.html
@@ -20,7 +20,7 @@ Do you want to do the following operation on <a href="{{url}}">{{obj}}</a>:
    <a class="btn btn-default" href="{{object.get_absolute_url}}"
        data-dismiss="modal">{% trans "Cancel" %}</a>
    <button class="btn btn-{{ opview.effect }}" type="submit" id="op-form-send">
-        {% if opview.icon %}<i class="icon-{{opview.icon}}"></i> {% endif %}{{ op|capfirst }}
+        {% if opview.icon %}<i class="fa fa-{{opview.icon}}"></i> {% endif %}{{ op|capfirst }}
      </button>
  </div>
 </form>
--- a/circle/dashboard/templates/dashboard/profile.html
+++ b/circle/dashboard/templates/dashboard/profile.html
@@ -12,7 +12,7 @@
      <div class="panel-heading">
        <a class="pull-right btn btn-default btn-xs" href="{% url "dashboard.index" %}">{% trans "Back" %}</a>
        <h3 class="no-margin">
-          <i class="icon-user"></i> 
+          <i class="fa fa-user"></i>
          {% include "dashboard/_display-name.html" with user=profile show_org=True %}
        </h3>
      </div>
@@ -47,7 +47,7 @@
        {% if perm_group_list %}
          <hr />
          <h4>
-            <i class="icon-group"></i> {% trans "Groups" %}
+            <i class="fa fa-group"></i> {% trans "Groups" %}
          </h4>
          <ul class="dashboard-profile-group-list">
          {% for g in groups %}
@@ -61,14 +61,14 @@
        <hr />

        <h4>
-          <i class="icon-desktop"></i>
+          <i class="fa fa-desktop"></i>
          {% trans "Virtual machines owned by the user" %} ({{ instances_owned|length }})
        </h4>
        <ul class="dashboard-profile-vm-list">
        {% for i in instances_owned %}
          <li>
            <a href="{{ i.get_absolute_url }}">
-              <i class="icon-li {{ i.get_status_icon }}"></i>
+              <i class="fa fa-li {{ i.get_status_icon }}"></i>
              {{ i }}
            </a>
          </li>
@@ -82,14 +82,14 @@
        <hr />

        <h4>
-          <i class="icon-desktop"></i> 
+          <i class="fa fa-desktop"></i>
          {% trans "Virtual machines with access" %} ({{ instances_with_access|length }})
        </h4>
        <ul class="dashboard-profile-vm-list">
        {% for i in instances_with_access %}
          <li>
            <a href="{{ i.get_absolute_url }}">
-              <i class="icon-li {{ i.get_status_icon }}"></i>
+              <i class="fa fa-li {{ i.get_status_icon }}"></i>
              {{ i }}
            </a>
          </li>

--- a/circle/dashboard/templates/dashboard/profile_form.html
+++ b/circle/dashboard/templates/dashboard/profile_form.html
@@ -14,7 +14,7 @@
        <a class="pull-right btn btn-default btn-xs"
          href="{% url "dashboard.views.profile" username=object.user.username %}">
          {% trans "Go to my profile" %}</a>
-        <h3 class="no-margin"><i class="icon-desktop"></i> {% trans "My profile" %}</h3>
+        <h3 class="no-margin"><i class="fa fa-desktop"></i> {% trans "My profile" %}</h3>
      </div>
      <div class="panel-body">
        <div class="row">
@@ -55,9 +55,9 @@
    <div class="panel panel-default">
      <div class="panel-heading">
        <a href="{% url "dashboard.views.userkey-create" %}" class="pull-right btn btn-success btn-xs" style="margin-right: 10px;">
-          <i class="icon-plus"></i> {% trans "add SSH key" %}
+          <i class="fa fa-plus"></i> {% trans "add SSH key" %}
        </a>
-        <h3 class="no-margin"><i class="icon-key"></i> {% trans "SSH public keys" %}</h3>
+        <h3 class="no-margin"><i class="fa fa-key"></i> {% trans "SSH public keys" %}</h3>
      </div>
      <div class="panel-body">
        {% render_table userkey_table %}

--- a/circle/dashboard/templates/dashboard/template-edit.html
+++ b/circle/dashboard/templates/dashboard/template-edit.html
@@ -12,7 +12,7 @@
    <div class="panel panel-default">
      <div class="panel-heading">
        <a class="pull-right btn btn-default btn-xs" href="{% url "dashboard.views.template-list" %}">{% trans "Back" %}</a>
-        <h3 class="no-margin"><i class="icon-puzzle-piece"></i> {% trans "Edit template" %}</h3>
+        <h3 class="no-margin"><i class="fa fa-puzzle-piece"></i> {% trans "Edit template" %}</h3>
      </div>
      <div class="panel-body">
        {% with form=form %}
@@ -26,7 +26,7 @@
  <div class="col-md-5">
    <div class="panel panel-default">
      <div class="panel-heading">
-        <h4 class="no-margin"><i class="icon-group"></i> {% trans "Manage access"  %}</h4>
+        <h4 class="no-margin"><i class="fa fa-group"></i> {% trans "Manage access"  %}</h4>
      </div>
      <div class="panel-body">
        <form action="{% url "dashboard.views.template-acl" pk=object.pk %}" method="post">{% csrf_token %}
@@ -36,14 +36,14 @@
                <th></th>
                <th>{% trans "Who" %}</th>
                <th>{% trans "What" %}</th>
-                <th><i class="icon-remove"></i></th>
+                <th><i class="fa fa-times"></i></th>
              </tr>
            </thead>
            <tbody>
              {% for i in acl.users %}
              <tr>
                <td>
-                  <i class="icon-user"></i>
+                  <i class="fa fa-user"></i>
                </td>
                <td>
                  <a href="{% url "dashboard.views.profile" username=i.user.username %}"
@@ -65,7 +65,7 @@
              {% endfor %}
              {% for i in acl.groups %}
              <tr>
-                <td><i class="icon-group"></i></td>
+                <td><i class="fa fa-group"></i></td>
                <td>
                  <a href="{% url "dashboard.views.group-detail" pk=i.group.pk %}">
                    {{i.group}}
@@ -83,7 +83,7 @@
                </td>
              </tr>
              {% endfor %}
-              <tr><td><i class="icon-plus"></i></td>
+              <tr><td><i class="fa fa-plus"></i></td>
                  <td><input type="text" class="form-control" name="perm-new-name"
                      placeholder="{% trans "Name of group or user" %}"></td>
                  <td><select class="form-control" name="perm-new">
@@ -104,7 +104,7 @@

    <div class="panel panel-default">
      <div class="panel-heading">
-        <h4 class="no-margin"><i class="icon-file"></i> {% trans "Disk list" %}</h4>
+        <h4 class="no-margin"><i class="fa fa-file"></i> {% trans "Disk list" %}</h4>
      </div>
      <div class="panel-body">
        <ul class="template-disk-list">

--- a/circle/dashboard/templates/dashboard/template-list.html
+++ b/circle/dashboard/templates/dashboard/template-list.html
@@ -11,9 +11,9 @@
    <div class="panel panel-default">
      <div class="panel-heading">
        <a href="{% url "dashboard.views.template-create" %}" class="pull-right btn btn-success btn-xs">
-          <i class="icon-plus"></i> {% trans "new base vm" %}
+          <i class="fa fa-plus"></i> {% trans "new base vm" %}
        </a>
-        <h3 class="no-margin"><i class="icon-puzzle-piece"></i> {% trans "Templates" %}</h3>
+        <h3 class="no-margin"><i class="fa fa-puzzle-piece"></i> {% trans "Templates" %}</h3>
      </div>
      <div class="panel-body">
        {% render_table table %}
@@ -28,10 +28,10 @@
      <div class="panel-heading">
        {% if perms.vm.create_leases %}
        <a href="{% url "dashboard.views.lease-create" %}" class="pull-right btn btn-success btn-xs" style="margin-right: 10px;">
-          <i class="icon-plus"></i> {% trans "new lease" %}
+          <i class="fa fa-plus"></i> {% trans "new lease" %}
        </a>
        {% endif %}
-        <h3 class="no-margin"><i class="icon-time"></i> {% trans "Leases" %}</h3>
+        <h3 class="no-margin"><i class="fa fa-time"></i> {% trans "Leases" %}</h3>
      </div>
      <div class="panel-body">
        <div class="" style="max-width: 600px;">
@@ -45,7 +45,7 @@
  <div class="col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading">
-        <h3 class="no-margin"><i class="icon-desktop"></i> Placeholder</h3>
+        <h3 class="no-margin"><i class="fa fa-desktop"></i> Placeholder</h3>
      </div>
      <div class="panel-body">
        ???

--- a/circle/dashboard/templates/dashboard/template-list/column-lease-actions.html
+++ b/circle/dashboard/templates/dashboard/template-list/column-lease-actions.html
 {% load i18n %}
 <a href="{% url "dashboard.views.lease-detail" pk=record.pk %}" id="template-list-edit-button" class="btn btn-default btn-xs" title data-original-title="{% trans "Edit" %}">
-  <i class="icon-edit"></i>
+  <i class="fa fa-edit"></i>
 </a>
 <a data-lease-pk="{{ record.pk }}" href="{% url "dashboard.views.lease-delete" pk=record.pk %}" class="btn btn-danger btn-xs lease-delete" title="{% trans "Delete" %}">
-  <i class="icon-remove"></i>
+  <i class="fa fa-times"></i>
 </a>
--- a/circle/dashboard/templates/dashboard/template-list/column-template-actions.html
+++ b/circle/dashboard/templates/dashboard/template-list/column-template-actions.html
 {% load i18n %}
 <a href="{% url "dashboard.views.template-detail" pk=record.pk%}" id="template-list-edit-button" class="btn btn-default btn-xs" title="{% trans "Edit" %}">
-  <i class="icon-edit"></i>
+  <i class="fa fa-edit"></i>
 </a>
 <a data-template-pk="{{ record.pk }}" href="{% url "dashboard.views.template-delete" pk=record.pk %}" class="btn btn-danger btn-xs template-delete" title="{% trans "Delete" %}">
-  <i class="icon-remove"></i>
+  <i class="fa fa-times"></i>
 </a>
--- a/circle/dashboard/templates/dashboard/userkey-create.html
+++ b/circle/dashboard/templates/dashboard/userkey-create.html
@@ -11,7 +11,7 @@
    <div class="panel panel-default">
      <div class="panel-heading">
        <a class="pull-right btn btn-default btn-xs" href="{% url "dashboard.views.profile-preferences" %}">{% trans "Back" %}</a>
-        <h3 class="no-margin"><i class="icon-key"></i> {% trans "Create SSH public key" %}</h3>
+        <h3 class="no-margin"><i class="fa fa-key"></i> {% trans "Create SSH public key" %}</h3>
      </div>
      <div class="panel-body">
        {% crispy form %}

--- a/circle/dashboard/templates/dashboard/userkey-edit.html
+++ b/circle/dashboard/templates/dashboard/userkey-edit.html
@@ -12,7 +12,7 @@
    <div class="panel panel-default">
      <div class="panel-heading">
        <a class="pull-right btn btn-default btn-xs" href="{% url "dashboard.views.profile-preferences" %}">{% trans "Back" %}</a>
-        <h3 class="no-margin"><i class="icon-key"></i> {% trans "Edit SSH public key" %}</h3>
+        <h3 class="no-margin"><i class="fa fa-key"></i> {% trans "Edit SSH public key" %}</h3>
      </div>
      <div class="panel-body">
        {% crispy form %}

--- a/circle/dashboard/templates/dashboard/userkey-list/column-userkey-actions.html
+++ b/circle/dashboard/templates/dashboard/userkey-list/column-userkey-actions.html
 {% load i18n %}
 <a href="{% url "dashboard.views.userkey-detail" pk=record.pk%}" id="template-list-edit-button" class="btn btn-default btn-xs" title="{% trans "Edit" %}">
-  <i class="icon-edit"></i>
+  <i class="fa fa-edit"></i>
 </a>
 <a data-template-pk="{{ record.pk }}" href="{% url "dashboard.views.userkey-delete" pk=record.pk %}" class="btn btn-danger btn-xs template-delete" title="{% trans "Delete" %}">
-  <i class="icon-remove"></i>
+  <i class="fa fa-times"></i>
 </a>
--- a/circle/dashboard/templates/dashboard/vm-detail.html
+++ b/circle/dashboard/templates/dashboard/vm-detail.html
@@ -10,7 +10,7 @@
  <strong>{% trans "This is the master vm of your new template" %}</strong>
  <div id="vm-details-template-tour-button" class="pull-right">
    <a href="#" class="btn btn-default btn-lg pull-right vm-details-start-template-tour">
-      <i class="icon-play"></i> {% trans "Start template tutorial" %}
+      <i class="fa fa-play"></i> {% trans "Start template tutorial" %}
    </a>
  </div>
  <ol>
@@ -63,7 +63,7 @@
    <div class="col-md-4" id="vm-info-pane">
      <div class="big">
        <span id="vm-details-state" class="label label-success">
-          <i class="{{ instance.get_status_icon }}"></i> 
+          <i class="fa {{ instance.get_status_icon }}"></i>
          <span>{{ instance.get_status_display|upper }}</span>
        </span>
      </div>
@@ -93,7 +93,7 @@
            <input type="text" id="vm-details-pw-input" class="form-control input-sm input-tags"
            value="{{ instance.pw }}" spellcheck="false"/>
            <span class="input-group-addon input-tags" id="vm-details-pw-show">
-              <i class="icon-eye-open" id="vm-details-pw-eye" title="Show password"></i>
+              <i class="fa fa-eye" id="vm-details-pw-eye" title="Show password"></i>
            </span>
          </div>
        </dd>
@@ -118,7 +118,7 @@
        {% trans "Connection is not possible." %}{% endif %}"
        id="vm-details-connection-string" class="form-control input-tags" />
        <span class="input-group-addon input-tags" id="vm-details-connection-string-copy">
-          <i class="icon-copy" title="{% trans "Select all" %}"></i>
+          <i class="fa fa-copy" title="{% trans "Select all" %}"></i>
        </span>
      </div>
    </div>
@@ -127,31 +127,31 @@
        <ul class="nav nav-pills panel-heading">
          <li class="active">
            <a href="#home" data-toggle="pill" data-target="#_home" class="text-center">
-              <i class="icon-compass icon-2x"></i><br>
+              <i class="fa fa-compass fa-2x"></i><br>
              {% trans "Home" %}</a>
          </li>
          <li>
            <a href="#resources" data-toggle="pill" data-target="#_resources" class="text-center">
-              <i class="icon-tasks icon-2x"></i><br>
+              <i class="fa fa-tasks fa-2x"></i><br>
              {% trans "Resources" %}</a>
          </li>
          <li{% if not instance.is_console_available %} class="disabled"{% endif %}>
            <a href="#console" data-toggle="pill" data-target="#_console" class="text-center">
-              <i class="icon-desktop icon-2x"></i><br>
+              <i class="fa fa-desktop fa-2x"></i><br>
              {% trans "Console" %}</a></li>
          <li>
            <a href="#access" data-toggle="pill" data-target="#_access" class="text-center">
-              <i class="icon-group icon-2x"></i><br>
+              <i class="fa fa-group fa-2x"></i><br>
              {% trans "Access" %}</a>
          </li>
          <li>
            <a href="#network" data-toggle="pill" data-target="#_network" class="text-center">
-              <i class="icon-globe icon-2x"></i><br>
+              <i class="fa fa-globe fa-2x"></i><br>
              {% trans "Network" %}</a>
          </li>
          <li>
            <a href="#activity" data-toggle="pill" data-target="#_activity" class="text-center">
-              <i class="icon-time icon-2x"></i><br>
+              <i class="fa fa-clock-o fa-2x"></i><br>
              {% trans "Activity" %}</a>
          </li>
        </ul>

--- a/circle/dashboard/templates/dashboard/vm-detail/_activity-timeline.html
+++ b/circle/dashboard/templates/dashboard/vm-detail/_activity-timeline.html
@@ -2,7 +2,7 @@
 {% for a in activities %}
 <div class="activity{% if a.pk == active.pk %} activity-active{%endif%}" data-activity-id="{{ a.pk }}">
  <span class="timeline-icon{% if a.has_failed %} timeline-icon-failed{% endif %}">
-  <i class="{% if not a.finished %} icon-refresh icon-spin {% else %}icon-plus{% endif %}"></i>
+  <i class="fa {% if not a.finished %}fa-refresh fa-spin {% else %}fa-plus{% endif %}"></i>
 </span>
 <strong{% if user.is_superuser and a.result %} title="{{ a.result.get_admin_text }}"{% endif %}>
  {% if user.is_superuser %}<a href="{{ a.get_absolute_url }}">{% endif %}
@@ -23,7 +23,7 @@
  {% csrf_token %}
  <input type="hidden" name="abort_operation"/>
  <input type="hidden" name="activity" value="{{ a.pk }}"/>
-  <button class="btn btn-danger btn-xs"><i class="icon-bolt"></i> {% trans "Abort" %}</button>
+  <button class="btn btn-danger btn-xs"><i class="fa fa-bolt"></i> {% trans "Abort" %}</button>
 </form>
 {% endif %}
  {% if a.children.count > 0 %}
@@ -36,7 +36,7 @@
        {% if s.finished %}
          {{ s.finished|time:"H:i:s" }}
        {% else %}
-          <i class="icon-refresh icon-spin" class="sub-activity-loading-icon"></i>
+          <i class="fa fa-refresh fa-spin" class="sub-activity-loading-icon"></i>
        {% endif %}
        {% if s.has_failed %}
          <div class="label label-danger">{% trans "failed" %}</div>

--- a/circle/dashboard/templates/dashboard/vm-detail/_disk-operations.html
+++ b/circle/dashboard/templates/dashboard/vm-detail/_disk-operations.html
@@ -4,7 +4,7 @@
 {% if op.is_disk_operation %}
    <a href="{{op.get_url}}" class="btn btn-success btn-xs
            operation operation-{{op.op}} btn btn-default">
-      <i class="icon-{{op.icon}}"></i>
+      <i class="fa fa-{{op.icon}}"></i>
            {{op.name}} </a>
 {% endif %}
 {% endfor %}
--- a/circle/dashboard/templates/dashboard/vm-detail/_network-port-add.html
+++ b/circle/dashboard/templates/dashboard/vm-detail/_network-port-add.html
@@ -5,7 +5,7 @@
    <input type="hidden" name="host_pk" value="{{ i.host.pk }}"/>
    <div class="input-group input-group-sm">
      <span class="input-group-addon">
-        <i class="icon-plus"></i> <i class="icon-long-arrow-right"></i>       
+        <i class="fa fa-plus"></i> <i class="fa fa-long-arrow-right"></i>
      </span>
      <input type="text" class="form-control" size="5" style="width: 80px;" name="port"/>
      <span class="input-group-addon">/</span>

--- a/circle/dashboard/templates/dashboard/vm-detail/_operations.html
+++ b/circle/dashboard/templates/dashboard/vm-detail/_operations.html
@@ -9,7 +9,7 @@
 <a href="{{op.get_url}}" class="operation operation-{{op.op}} btn
    btn-{{op.effect}} btn-xs" title="{{op.name}}: {{op.description}}">
 {% endif %}
-    <i class="icon-{{op.icon}}"></i>
+    <i class="fa fa-{{op.icon}}"></i>
    <span{% if not op.is_preferred %} class="sr-only"{% endif %}>{{op.name}}</span>
 {% if op.disabled %}
 </span>

--- a/circle/dashboard/templates/dashboard/vm-detail/access.html
+++ b/circle/dashboard/templates/dashboard/vm-detail/access.html
@@ -25,7 +25,7 @@
    <tbody>
        {% for i in acl.users %}
        <tr>
-          <td><i class="icon-user"></i></td>
+          <td><i class="fa fa-user"></i></td>
          <td>
            <a href="{% url "dashboard.views.profile" username=i.user.username %}" title="{{ i.user.username }}"
              >{% include "dashboard/_display-name.html" with user=i.user show_org=True %}</a>
@@ -44,7 +44,7 @@
        {% endfor %}
        {% for i in acl.groups %}
        <tr>
-          <td><i class="icon-group"></i></td>
+          <td><i class="fa fa-group"></i></td>
          <td>
            <a href="{% url "dashboard.views.group-detail" pk=i.group.pk %}"
              >{{ i.group.name }}</a>
@@ -60,7 +60,7 @@
          </td>
        </tr>
        {% endfor %}
-        <tr><td><i class="icon-plus"></i></td>
+        <tr><td><i class="fa fa-plus"></i></td>
            <td><input type="text" class="form-control" name="perm-new-name"
                placeholder="{% trans "Name of group or user" %}"></td>
            <td><select class="form-control" name="perm-new">

--- a/circle/dashboard/templates/dashboard/vm-detail/console.html
+++ b/circle/dashboard/templates/dashboard/vm-detail/console.html
@@ -4,7 +4,7 @@
  <button id="sendCtrlAltDelButton" class="btn btn-danger btn-sm">{% trans "Send Ctrl+Alt+Del" %}</button>
  <button id="sendPasswordButton" class="btn btn-default btn-sm">{% trans "Type password" %}</button>
 {% endif %}
-  <button id="getScreenshotButton" class="btn btn-info btn-sm pull-right" data-vm-pk="{{ instance.pk }}"><i class="icon-picture"></i> {% trans "Screenshot" %}</button>
+  <button id="getScreenshotButton" class="btn btn-info btn-sm pull-right" data-vm-pk="{{ instance.pk }}"><i class="fa fa-picture"></i> {% trans "Screenshot" %}</button>
 </div>
 {% if perms.vm.access_console %}
 <div class="alert alert-info" id="noVNC_status">

--- a/circle/dashboard/templates/dashboard/vm-detail/home.html
+++ b/circle/dashboard/templates/dashboard/vm-detail/home.html
@@ -3,10 +3,10 @@
  <div class="col-md-4">
    <dl>
      <dt>{% trans "System" %}:</dt>
-      <dd><i class="icon-{{ os_type_icon }}"></i> {{ instance.system }}</dd>
+      <dd><i class="fa fa-{{ os_type_icon }}"></i> {{ instance.system }}</dd>
      <dt style="margin-top: 5px;">
        {% trans "Name" %}:
-        <a href="#" class="vm-details-home-edit-name-click"><i class="icon-pencil"></i></a>
+        <a href="#" class="vm-details-home-edit-name-click"><i class="fa fa-pencil"></i></a>
      </dt>
      <dd>
        <div class="vm-details-home-edit-name-click">
@@ -19,7 +19,7 @@
              <input type="text" name="new_name" value="{{ instance.name }}" class="form-control input-sm"/>
              <span class="input-group-btn">
                <button type="submit" class="btn btn-success btn-sm vm-details-rename-submit">
-                  <i class="icon-pencil"></i> {% trans "Rename" %}
+                  <i class="fa fa-pencil"></i> {% trans "Rename" %}
                </button>
              </span>
            </div>
@@ -28,7 +28,7 @@
      </dd>
      <dt style="margin-top: 5px;">
        {% trans "Description" %}:
-        <a href="#" class="vm-details-home-edit-description-click"><i class="icon-pencil"></i></a>
+        <a href="#" class="vm-details-home-edit-description-click"><i class="fa fa-pencil"></i></a>
      </dt>
      <dd>
        {% csrf_token %}
@@ -39,26 +39,26 @@
          <form method="POST">
            <textarea name="new_description" class="form-control">{{ instance.description }}</textarea>
            <button type="submit" class="btn btn-xs btn-success vm-details-description-submit">
-              <i class="icon-pencil"></i> {% trans "Update" %}
+              <i class="fa fa-pencil"></i> {% trans "Update" %}
            </button>
          </form>
        </div>
      </dd>
    </dl>

-    <h4>{% trans "Expiration" %} {% if instance.is_expiring %}<i class="icon-warning-sign text-danger"></i>{% endif %}
+    <h4>{% trans "Expiration" %} {% if instance.is_expiring %}<i class="fa fa-warning-sign text-danger"></i>{% endif %}
        {% with op=op.renew %}
          <a href="{{op.get_url}}" class="btn btn-success btn-xs
                  operation operation-{{op.op}} btn btn-default">
-            <i class="icon-{{op.icon}}"></i>
+            <i class="fa fa-{{op.icon}}"></i>
                  {{op.name}} </a>
        {% endwith %}
    </h4>
    <dl>
      <dt>{% trans "Suspended at:" %}</dt>
-      <dd><i class="icon-moon"></i> {{ instance.time_of_suspend|timeuntil }}</dd>
+      <dd><i class="fa fa-moon"></i> {{ instance.time_of_suspend|timeuntil }}</dd>
      <dt>{% trans "Destroyed at:" %}</dt>
-      <dd><i class="icon-remove"></i> {{ instance.time_of_delete|timeuntil }}</dd>
+      <dd><i class="fa fa-times"></i> {{ instance.time_of_delete|timeuntil }}</dd>
    </dl>

    <div style="font-weight: bold;">{% trans "Tags" %}</div>
@@ -68,7 +68,7 @@
          {% for t in instance.tags.all %}
            <div class="label label-primary label-tag" style="display: inline-block">
              {{ t }}
-              <a href="#" class="vm-details-remove-tag"><i class="icon-remove"></i></a>
+              <a href="#" class="vm-details-remove-tag"><i class="fa fa-times"></i></a>
            </div>
          {% endfor %}
        {% else %}
@@ -80,7 +80,7 @@
        <div class="input-group" id="vm-details-tags-form">
          <input type="text" class="form-control input-sm input-tags" name="new_tag" id="vm-details-tags-input"/>
          <!--<div class="input-group-addon">
-            <i class="icon-question"></i>
+            <i class="fa fa-question"></i>
          </div>-->
          <div class="input-group-btn">
            <input type="submit" class="btn btn-default btn-sm input-tags" value="{% trans "Add tag" %}"/>

--- a/circle/dashboard/templates/dashboard/vm-detail/network.html
+++ b/circle/dashboard/templates/dashboard/vm-detail/network.html
@@ -2,7 +2,7 @@
 {% load network_tags %}
 <h2>
  <a href="#" id="vm-details-network-add" class="btn btn-success pull-right no-js-hidden">
-    <i class="icon-plus"></i> {% trans "add interface" %}
+    <i class="fa fa-plus"></i> {% trans "add interface" %}
  </a>
  {% trans "Interfaces" %}
 </h2>
@@ -33,7 +33,7 @@
          </select>
          <div class="input-group-btn">
            <button {% if vlans|length == 0 %}disabled{% endif %}
-              type="submit" class="btn btn-success"><i class="icon-plus-sign"></i></button>
+              type="submit" class="btn btn-success"><i class="fa fa-plus-circle"></i></button>
          </div>
        </div>
      </form>
@@ -45,7 +45,7 @@
 {% for i in instance.interface_set.all %}
 <div>
  <h3 class="list-group-item-heading dashboard-vm-details-network-h3">
-    <i class="icon-{% if i.host %}globe{% else %}link{% endif %}"></i> {{ i.vlan.name }} 
+    <i class="fa fa-{% if i.host %}globe{% else %}link{% endif %}"></i> {{ i.vlan.name }}
    {% if not i.host%}({% trans "unmanaged" %}){% endif %}
    {% if user.is_superuser %}
      <a href="{{ i.host.get_absolute_url }}"
@@ -85,13 +85,13 @@
            <table class="table table-striped rule-table">
              <thead>
                <tr><th>
-                  <i class="icon-globe icon-2x"></i>
-                  <i class="icon-long-arrow-right icon-2x"></i>
+                  <i class="fa fa-globe fa-2x"></i>
+                  <i class="fa fa-long-arrow-right fa-2x"></i>
                  </th><th>
-                  <i class="icon-shield icon-2x"></i>
+                  <i class="fa fa-shield fa-2x"></i>
                  </th><th colspan="2">
-                  <i class="icon-long-arrow-right icon-2x"></i>
-                  <i class="icon-desktop icon-2x"></i>
+                  <i class="fa fa-long-arrow-right fa-2x"></i>
+                  <i class="fa fa-desktop fa-2x"></i>
                </th></tr>
              </thead>
              <tbody>
@@ -101,12 +101,12 @@
                      <td>
                        {% display_portforward4 l %}
                      </td>
-                      <td><i class="icon-long-arrow-right"></i></td>
+                      <td><i class="fa fa-long-arrow-right"></i></td>
                      <td>
                        {{ l.private }}/{{ l.proto }}
                      </td>
                      <td>
-                        <a href="{% url "dashboard.views.remove-port" pk=instance.pk rule=l.ipv4.pk %}" class="btn btn-link btn-xs vm-details-remove-port" data-rule="{{ l.ipv4.pk }}" title="{% trans "Remove" %}"><i class="icon-remove"><span class="sr-only">{% trans "Remove" %}</span></i></a>
+                        <a href="{% url "dashboard.views.remove-port" pk=instance.pk rule=l.ipv4.pk %}" class="btn btn-link btn-xs vm-details-remove-port" data-rule="{{ l.ipv4.pk }}" title="{% trans "Remove" %}"><i class="fa fa-times"><span class="sr-only">{% trans "Remove" %}</span></i></a>
                      </td>
                    </tr>
                  {% endif %}
@@ -119,11 +119,11 @@
            <table class="table table-striped rule-table">
              <thead>
                <tr><th>
-                  <i class="icon-globe icon-2x"></i>
+                  <i class="fa fa-globe fa-2x"></i>
                </th><th>
-                  <i class="icon-long-arrow-right icon-2x"></i>
+                  <i class="fa fa-long-arrow-right fa-2x"></i>
                </th><th colspan="2">
-                  <i class="icon-desktop icon-2x"></i>
+                  <i class="fa fa-desktop fa-2x"></i>
                </th></tr>
              </thead>
              <tbody>
@@ -133,12 +133,12 @@
                      <td>
                        {% display_portforward6 l %}
                      </td>
-                      <td><i class="icon-long-arrow-right"></i></td>
+                      <td><i class="fa fa-long-arrow-right"></i></td>
                      <td>
                        {{ l.private }}/{{ l.proto }}
                      </td>
                      <td>
-                        <a href="{% url "dashboard.views.remove-port" pk=instance.pk rule=l.ipv4.pk %}" class="btn btn-link btn-xs vm-details-remove-port" data-rule="{{ l.ipv6.pk }}" title="{% trans "Remove" %}"><i class="icon-remove"><span class="sr-only">{% trans "Remove" %}</span></i></a>
+                        <a href="{% url "dashboard.views.remove-port" pk=instance.pk rule=l.ipv4.pk %}" class="btn btn-link btn-xs vm-details-remove-port" data-rule="{{ l.ipv6.pk }}" title="{% trans "Remove" %}"><i class="fa fa-times"><span class="sr-only">{% trans "Remove" %}</span></i></a>
                      </td>
                    </tr>
                  {% endif %}

--- a/circle/dashboard/templates/dashboard/vm-detail/resources.html
+++ b/circle/dashboard/templates/dashboard/vm-detail/resources.html
@@ -6,7 +6,7 @@
  {% csrf_token %}
 <p class="row">
    <div class="col-sm-3">
-      <label for="vm-cpu-priority-slider"><i class="icon-trophy"></i> {% trans "CPU priority" %}</label>
+      <label for="vm-cpu-priority-slider"><i class="fa fa-trophy"></i> {% trans "CPU priority" %}</label>
    </div>
    <div class="col-sm-9">
      <input name="cpu-priority" type="text" id="vm-cpu-priority-slider" class="vm-slider" value="{{ instance.priority }}" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="{{ instance.priority }}" data-slider-orientation="horizontal" data-slider-handle="square" data-slider-tooltip="hide"/>
@@ -16,7 +16,7 @@

 <p class="row">
    <div class="col-sm-3">
-      <label for="cpu-count-slider"><i class="icon-cogs"></i> {% trans "CPU count" %}</label>
+      <label for="cpu-count-slider"><i class="fa fa-cogs"></i> {% trans "CPU count" %}</label>
    </div>
    <div class="col-sm-9">
      <input name="cpu-count" type="text" id="vm-cpu-count-slider" class="vm-slider" value=" {{ instance.num_cores }}" data-slider-min="0" data-slider-max="8" data-slider-step="1" data-slider-value="{{ instance.num_cores }}" data-slider-orientation="horizontal" data-slider-handle="square" data-slider-tooltip="hide"/>
@@ -26,7 +26,7 @@

 <p class="row">
    <div class="col-sm-3">
-      <label for="ram-slider"><i class="icon-ticket"></i> {% trans "RAM amount" %}</label>
+      <label for="ram-slider"><i class="fa fa-ticket"></i> {% trans "RAM amount" %}</label>
    </div>
    <div class="col-sm-9">
      <input name="ram-size" type="text" id="vm-ram-size-slider" class="vm-slider" value="{{ instance.ram_size }}" data-slider-min="128" data-slider-max="4096" data-slider-step="128" data-slider-value="{{ instance.ram_size }}" data-slider-orientation="horizontal" data-slider-handle="square" data-slider-tooltip="hide"/>         MiB
@@ -39,7 +39,7 @@
    <button type="submit" class="btn btn-success btn-sm enabled-when-stopped" id="vm-details-resources-save"
      data-vm="{{ instance.pk }}"
      {% if not op.resources_change %}disabled{% endif %}>
-      <i class="icon-save"></i> {% trans "Save resources" %}
+      <i class="fa fa-floppy-o"></i> {% trans "Save resources" %}
    </button>
    <span class="hide-when-stopped"
      {% if op.resources_change %}style="display: none;"{% endif %}

--- a/circle/dashboard/templates/dashboard/vm-list.html
+++ b/circle/dashboard/templates/dashboard/vm-list.html
@@ -11,15 +11,15 @@
      <div class="panel-heading">
        <div class="pull-right table-sorting">
          {% trans "Sorting ... " %}
-          <!--<i class="icon-refresh icon-spin icon-2x"></i>-->
+          <!--<i class="fa fa-refresh fa-spin fa-2x"></i>-->
        </div>
-        <h3 class="no-margin"><i class="icon-desktop"></i> {% trans "Virtual machines" %}</h3>
+        <h3 class="no-margin"><i class="fa fa-desktop"></i> {% trans "Virtual machines" %}</h3>
      </div>
      <div class="pull-right" style="max-width: 250px; margin-top: 15px; margin-right: 15px;">
        <form action="" method="GET" class="input-group">
          <input type="text" name="s"{% if request.GET.s %} value="{{ request.GET.s }}"{% endif %} class="form-control input-tags" placeholder="{% trans "Search..."%}" />
          <div class="input-group-btn">
-            <button type="submit" class="form-control btn btn-primary input-tags" title="search"><i class="icon-search"></i></button>
+            <button type="submit" class="form-control btn btn-primary input-tags" title="search"><i class="fa fa-search"></i></button>
          </div>
        </form>
      </div>
@@ -27,10 +27,10 @@
        <p>
        <strong>{% trans "Group actions" %}</strong>
        <button id="vm-list-group-select-all" class="btn btn-info btn-xs">{% trans "Select all" %}</button>
-        <a class="btn btn-default btn-xs" id="vm-list-group-migrate" disabled><i class="icon-truck"></i> {% trans "Migrate" %}</a>
-        <a disabled href="#" class="btn btn-default btn-xs"><i class="icon-refresh"></i> {% trans "Reboot" %}</a>
-        <a disabled href="#" class="btn btn-default btn-xs"><i class="icon-off"></i> {% trans "Shutdown" %}</a>
-        <a id="vm-list-group-delete" disabled href="#" class="btn btn-danger btn-xs"><i class="icon-remove"></i> {% trans "Destroy" %}</a>
+        <a class="btn btn-default btn-xs" id="vm-list-group-migrate" disabled><i class="fa fa-truck"></i> {% trans "Migrate" %}</a>
+        <a disabled href="#" class="btn btn-default btn-xs"><i class="fa fa-refresh"></i> {% trans "Reboot" %}</a>
+        <a disabled href="#" class="btn btn-default btn-xs"><i class="fa fa-off"></i> {% trans "Shutdown" %}</a>
+        <a id="vm-list-group-delete" disabled href="#" class="btn btn-danger btn-xs"><i class="fa fa-times"></i> {% trans "Destroy" %}</a>
        </p>
      </div>
      <div class="panel-body">

--- a/circle/dashboard/templates/dashboard/vm-list/column-actions.html
+++ b/circle/dashboard/templates/dashboard/vm-list/column-actions.html

 <div class="btn-group">
-  <button type="button" class="btn btn-xs btn-warning nojs-dropdown-toogle dropdown-toggle" data-toggle="dropdown">Action <i class="icon-caret-down"></i></button>
+  <button type="button" class="btn btn-xs btn-warning nojs-dropdown-toogle dropdown-toggle" data-toggle="dropdown">Action <i class="fa fa-caret-down"></i></button>
  <ul class="nojs-dropdown-toogle dropdown-menu" role="menu">
-    <li><a href="#"><i class="icon-refresh"></i> Reboot</a></li>
-    <li><a href="#"><i class="icon-off"></i> Shutdown</a></li>
-    <li><a data-vm-pk="{{ record.pk }}" class="real-link vm-delete" href="{% url "dashboard.views.delete-vm" pk=record.pk %}?next={{ request.path }}"><i class="icon-remove"></i> Discard</a></li>
+    <li><a href="#"><i class="fa fa-refresh"></i> Reboot</a></li>
+    <li><a href="#"><i class="fa fa-off"></i> Shutdown</a></li>
+    <li><a data-vm-pk="{{ record.pk }}" class="real-link vm-delete" href="{% url "dashboard.views.delete-vm" pk=record.pk %}?next={{ request.path }}"><i class="fa fa-times"></i> Discard</a></li>
  </ul>
 </div>
--- a/circle/dashboard/templates/dashboard/vm-list/column-admin.html
+++ b/circle/dashboard/templates/dashboard/vm-list/column-admin.html
 <a href="{% url "dashboard.vm.op.migrate" pk=record.pk %}" class="btn btn-default btn-xs vm-migrate" data-vm-pk="{{ record.pk }}" title data-original-title="Migrate">
-  <i class="icon-truck"></i>
+  <i class="fa fa-truck"></i>
 </a>
 <a id="vm-list-rename-button" class="btn btn-default btn-xs" title data-original-title="Rename">
-  <i class="icon-pencil"></i>
+  <i class="fa fa-pencil"></i>
 </a>
 <a href="#" class="btn btn-default btn-xs vm-list-connect" data-toggle="popover"
  data-content='

--- a/circle/dashboard/templates/dashboard/vm-list/column-name.html
+++ b/circle/dashboard/templates/dashboard/vm-list/column-name.html
--- a/circle/dashboard/templates/dashboard/vm-list/test-one.html
+++ b/circle/dashboard/templates/dashboard/vm-list/test-one.html
@@ -10,10 +10,10 @@
              <td>1 month</td>
              <td>
                <a class="btn btn-default btn-xs" title data-original-title="Migrate">
-                  <i class="icon-truck"></i>
+                  <i class="fa fa-truck"></i>
                </a>
                <a class="btn btn-default btn-xs" title data-original-title="Rename">
-                  <i class="icon-pencil"></i>
+                  <i class="fa fa-pencil"></i>
                </a>
                <a href="#" class="btn btn-default btn-xs vm-list-connect" data-toggle="popover"
                  data-content='
@@ -39,11 +39,11 @@
              </td>
              <td>
                <div class="btn-group">
-                  <button type="button" class="btn btn-xs btn-warning nojs-dropdown-toogle dropdown-toggle" data-toggle="dropdown">Action <i class="icon-caret-down"></i></button>
+                  <button type="button" class="btn btn-xs btn-warning nojs-dropdown-toogle dropdown-toggle" data-toggle="dropdown">Action <i class="fa fa-caret-down"></i></button>
                  <ul class="nojs-dropdown-menu dropdown-menu" role="menu">
-                    <li><a href="#"><i class="icon-refresh"></i> Reboot</a></li>
-                    <li><a href="#"><i class="icon-off"></i> Shutdown</a></li>
-                    <li><a href="#"><i class="icon-remove"></i> Discard</a></li>
+                    <li><a href="#"><i class="fa fa-refresh"></i> Reboot</a></li>
+                    <li><a href="#"><i class="fa fa-off"></i> Shutdown</a></li>
+                    <li><a href="#"><i class="fa fa-times"></i> Discard</a></li>
                  </ul>
                </div>
              </td>

--- a/circle/dashboard/templates/display-form-errors.html
+++ b/circle/dashboard/templates/display-form-errors.html
--- a/circle/dashboard/views.py
+++ b/circle/dashboard/views.py
@@ -681,7 +681,7 @@ class VmCreateDiskView(FormOperationMixin, VmOperationView):
    op = 'create_disk'
    form_class = VmCreateDiskForm
    show_in_toolbar = False
-    icon = 'hdd'
+    icon = 'hdd-o'
    is_disk_operation = True


@@ -846,10 +846,10 @@ vm_ops = OrderedDict([
    ('deploy', VmOperationView.factory(
        op='deploy', icon='play', effect='success')),
    ('wake_up', VmOperationView.factory(
-        op='wake_up', icon='sun', effect='success')),
+        op='wake_up', icon='sun-o', effect='success')),
    ('sleep', VmOperationView.factory(
        extra_bases=[TokenOperationView],
-        op='sleep', icon='moon', effect='info')),
+        op='sleep', icon='moon-o', effect='info')),
    ('migrate', VmMigrateView),
    ('save_as_template', VmSaveView),
    ('reboot', VmOperationView.factory(
@@ -857,14 +857,14 @@ vm_ops = OrderedDict([
    ('reset', VmOperationView.factory(
        op='reset', icon='bolt', effect='warning')),
    ('shutdown', VmOperationView.factory(
-        op='shutdown', icon='off', effect='warning')),
+        op='shutdown', icon='power-off', effect='warning')),
    ('shut_off', VmOperationView.factory(
-        op='shut_off', icon='ban-circle', effect='warning')),
+        op='shut_off', icon='ban', effect='warning')),
    ('recover', VmOperationView.factory(
        op='recover', icon='medkit', effect='warning')),
    ('destroy', VmOperationView.factory(
        extra_bases=[TokenOperationView],
-        op='destroy', icon='remove', effect='danger')),
+        op='destroy', icon='times', effect='danger')),
    ('create_disk', VmCreateDiskView),
    ('download_disk', VmDownloadDiskView),
    ('renew', VmRenewView),

--- a/circle/firewall/fw.py
+++ b/circle/firewall/fw.py
@@ -319,7 +319,8 @@ def dhcp():


 def vlan():
-    obj = Vlan.objects.values('vid', 'name', 'network4', 'network6')
+    obj = Vlan.objects.filter(managed=True).values(
+        'vid', 'name', 'network4', 'network6')
    retval = {x['name']: {'tag': x['vid'],
                          'type': 'internal',
                          'interfaces': [x['name']],

--- a/circle/firewall/models.py
+++ b/circle/firewall/models.py
@@ -35,10 +35,12 @@ import django.conf
 from django.db.models.signals import post_save, post_delete
 import random

-from common.models import HumanSortField
+from common.models import method_cache, WorkerNotFound, HumanSortField
 from firewall.tasks.local_tasks import reloadtask
 from .iptables import IptRule
 from acl.models import AclBase
+
+
 logger = logging.getLogger(__name__)
 settings = django.conf.settings.FIREWALL_SETTINGS

@@ -189,19 +191,31 @@ class Rule(models.Model):
    def get_absolute_url(self):
        return ('network.rule', None, {'pk': self.pk})

-    @staticmethod
-    def get_chain_name(local, remote, direction):
-        if direction == 'in':
+    def get_chain_name(self, local, remote):
+        if local:  # host or vlan
+            if self.direction == 'in':
                # remote -> local
-            return '%s_%s' % (remote, local)
+                return '%s_%s' % (remote.name, local.name)
            else:
                # local -> remote
-            return '%s_%s' % (local, remote)
+                return '%s_%s' % (local.name, remote.name)
+            # firewall rule
+        elif self.firewall_id:
+            return 'INPUT' if self.direction == 'in' else 'OUTPUT'
+
+    def get_dport_sport(self):
+        if self.direction == 'in':
+            return self.dport, self.sport
+        else:
+            return self.sport, self.dport

    def get_ipt_rules(self, host=None):
        # action
        action = 'LOG_ACC' if self.action == 'accept' else 'LOG_DROP'

+        # 'chain_name': rule dict
+        retval = {}
+
        # src and dst addresses
        src = None
        dst = None
@@ -212,34 +226,28 @@ class Rule(models.Model):
                dst = ip
            else:
                src = ip
-
-        # src and dst ports
-        if self.direction == 'in':
-            dport = self.dport
-            sport = self.sport
+            vlan = host.vlan
+        elif self.vlan_id:
+            vlan = self.vlan
        else:
-            dport = self.sport
-            sport = self.dport
+            vlan = None

-        # 'chain_name': rule dict
-        retval = {}
+        if vlan and not vlan.managed:
+            return retval
+
+        # src and dst ports
+        dport, sport = self.get_dport_sport()

        # process foreign vlans
        for foreign_vlan in self.foreign_network.vlans.all():
+            if not foreign_vlan.managed:
+                continue
+
            r = IptRule(priority=self.weight, action=action,
                        proto=self.proto, extra=self.extra,
                        comment='Rule #%s' % self.pk,
                        src=src, dst=dst, dport=dport, sport=sport)
-            # host, hostgroup or vlan rule
-            if host or self.vlan_id:
-                local_vlan = host.vlan.name if host else self.vlan.name
-                chain_name = Rule.get_chain_name(local=local_vlan,
-                                                 remote=foreign_vlan.name,
-                                                 direction=self.direction)
-            # firewall rule
-            elif self.firewall_id:
-                chain_name = 'INPUT' if self.direction == 'in' else 'OUTPUT'
-
+            chain_name = self.get_chain_name(local=vlan, remote=foreign_vlan)
            retval[chain_name] = r

        return retval
@@ -796,6 +804,20 @@ class Firewall(models.Model):
    def __unicode__(self):
        return self.name

+    @method_cache(30)
+    def get_remote_queue_name(self, queue_id):
+        """Returns the name of the remote celery queue for this node.
+
+        Throws Exception if there is no worker on the queue.
+        The result may include dead queues because of caching.
+        """
+        from .tasks.remote_tasks import check_queue
+
+        if check_queue(self.name, queue_id, None):
+            return self.name + "." + queue_id
+        else:
+            raise WorkerNotFound()
+

 class Domain(models.Model):
    name = models.CharField(max_length=40, validators=[val_domain],

--- a/circle/firewall/tasks/local_tasks.py
+++ b/circle/firewall/tasks/local_tasks.py
@@ -20,8 +20,10 @@ from socket import gethostname

 import django.conf
 from django.core.cache import cache
+from celery.exceptions import TimeoutError

 from manager.mancelery import celery
+from common.models import WorkerNotFound

 settings = django.conf.settings.FIREWALL_SETTINGS
 logger = getLogger(__name__)
@@ -36,19 +38,37 @@ def _apply_once(name, queues, task, data):
        return
    cache.delete(lockname)

+    data = data()
    for queue in queues:
-        task.apply_async(args=data(), queue=queue)
-    logger.info("%s configuration is reloaded.", name)
+        try:
+            task.apply_async(args=data, queue=queue, expires=60).get(timeout=5)
+            logger.info("%s configuration is reloaded. (queue: %s)",
+                        name, queue)
+        except TimeoutError as e:
+            logger.critical('%s (queue: %s)', e, queue)
+        except:
+            logger.critical('Unhandled exception: queue: %s data: %s',
+                            queue, data, exc_info=True)
+
+
+def get_firewall_queues():
+    from firewall.models import Firewall
+    retval = []
+    for fw in Firewall.objects.all():
+        try:
+            retval.append(fw.get_remote_queue_name('firewall'))
+        except WorkerNotFound:
+            logger.critical('Firewall %s is offline', fw.name)
+    return list(retval)


 @celery.task(ignore_result=True)
-def periodic_task():
+def reloadtask_worker():
    from firewall.fw import BuildFirewall, dhcp, dns, ipset, vlan
    from remote_tasks import (reload_dns, reload_dhcp, reload_firewall,
                              reload_firewall_vlan, reload_blacklist)

-    firewall_queues = [("%s.firewall" % i) for i in
-                       settings.get('firewall_queues', [gethostname()])]
+    firewall_queues = get_firewall_queues()
    dns_queues = [("%s.dns" % i) for i in
                  settings.get('dns_queues', [gethostname()])]

@@ -78,5 +98,5 @@ def reloadtask(type='Host', timeout=15):
    }[type]
    logger.info("Reload %s on next periodic iteration applying change to %s.",
                ", ".join(reload), type)
-    for i in reload:
-        cache.add("%s_lock" % i, "true", 30)
+    if all(cache.add("%s_lock" % i, True, 30) for i in reload):
+        reloadtask_worker.apply_async(queue='localhost.man', countdown=5)
--- a/circle/firewall/tasks/remote_tasks.py
+++ b/circle/firewall/tasks/remote_tasks.py
@@ -18,6 +18,24 @@
 from manager.mancelery import celery


+def check_queue(firewall, queue_id, priority):
+    ''' Celery inspect job to check for active workers at queue_id
+        return True/False
+    '''
+    queue_name = firewall + "." + queue_id
+    if priority is not None:
+        queue_name = queue_name + "." + priority
+    inspect = celery.control.inspect()
+    inspect.timeout = 0.1
+    active_queues = inspect.active_queues()
+    if active_queues is None:
+        return False
+
+    queue_names = (queue['name'] for worker in active_queues.itervalues()
+                   for queue in worker)
+    return queue_name in queue_names
+
+
 @celery.task(name='firewall.reload_dns')
 def reload_dns(data):
    pass

--- a/circle/firewall/templates/firewall/iptables.conf
+++ b/circle/firewall/templates/firewall/iptables.conf
@@ -27,13 +27,21 @@ COMMIT
 -A LOG_ACC -j ACCEPT

 # initialize FORWARD chain
+{% if proto == "ipv4" %}
 -A FORWARD -m set --match-set blacklist src,dst -j DROP
+{% endif %}
 -A FORWARD -m state --state INVALID -g LOG_DROP
 -A FORWARD -m state --state ESTABLISHED,RELATED -j ACCEPT
+{% if proto == "ipv4" %}
 -A FORWARD -p icmp --icmp-type echo-request -g LOG_ACC
+{% else %}
+-A FORWARD -p icmpv6 --icmpv6-type echo-request -g LOG_ACC
+{% endif %}

 # initialize INPUT chain
+{% if proto == "ipv4" %}
 -A INPUT -m set --match-set blacklist src -j DROP
+{% endif %}
 -A INPUT -m state --state INVALID -g LOG_DROP
 -A INPUT -i lo -j ACCEPT
 -A INPUT -m state --state ESTABLISHED,RELATED -j ACCEPT

--- a/circle/firewall/tests/test_firewall.py
+++ b/circle/firewall/tests/test_firewall.py
@@ -23,7 +23,7 @@ from ..admin import HostAdmin
 from firewall.models import (Vlan, Domain, Record, Host, VlanGroup, Group,
                             Rule, Firewall)
 from firewall.fw import dns, ipv6_to_octal
-from firewall.tasks.local_tasks import periodic_task, reloadtask
+from firewall.tasks.local_tasks import reloadtask_worker, reloadtask
 from django.forms import ValidationError
 from ..iptables import IptRule, IptChain, InvalidRuleExcepion
 from mock import patch
@@ -323,6 +323,6 @@ class ReloadTestCase(TestCase):
        with patch('firewall.tasks.local_tasks.cache') as cache:
            self.test_host_add_port()
            self.test_host_add_port2()
-            periodic_task()
+            reloadtask_worker()
            reloadtask()
            assert cache.delete.called
--- a/circle/manager/mancelery.py
+++ b/circle/manager/mancelery.py
@@ -45,11 +45,6 @@ celery.conf.update(
              routing_key="monitor"),
    ),
    CELERYBEAT_SCHEDULE={
-        'firewall.periodic_task': {
-            'task': 'firewall.tasks.local_tasks.periodic_task',
-            'schedule': timedelta(seconds=5),
-            'options': {'queue': 'localhost.man'}
-        },
        'vm.update_domain_states': {
            'task': 'vm.tasks.local_periodic_tasks.update_domain_states',
            'schedule': timedelta(seconds=10),

--- a/circle/monitor/tasks/local_periodic_tasks.py
+++ b/circle/monitor/tasks/local_periodic_tasks.py
@@ -23,7 +23,9 @@ from django.conf import settings
 from manager.mancelery import celery

 from vm.tasks.vm_tasks import check_queue
+from firewall.tasks.remote_tasks import check_queue as check_queue_fw
 from vm.models import Node, InstanceTemplate
+from firewall.models import Firewall
 from storage.models import DataStore
 from monitor.client import Client

@@ -80,6 +82,11 @@ def check_celery_queues():
                                           "storage-" + s, is_queue_alive,
                                           time()))

+    for fw in Firewall.objects.all():
+        is_queue_alive = check_queue_fw(fw.name, "firewall", None)
+        metrics.append(graphite_string(
+            "firewall", fw.name, "firewall", is_queue_alive, time()))
+
    Client().send(metrics)



--- a/circle/network/static/js/host.js
+++ b/circle/network/static/js/host.js
-$('i[class="icon-remove"]').click(function() {
+$('i[class="fa fa-times"]').click(function() {
    href = $(this).parent('a').attr('href');
    csrf = getCookie('csrftoken');
    var click_this = this;

--- a/circle/network/static/js/switch-port.js
+++ b/circle/network/static/js/switch-port.js
-$('i[class="icon-remove"]').click(function() {
+$('i[class="fa fa-times"]').click(function() {
    href = $(this).parent('a').attr('href');
    csrf = getCookie('csrftoken');
    var click_this = this;

--- a/circle/network/templates/network/base.html
+++ b/circle/network/templates/network/base.html
+{% extends "base.html" %}
 {% load i18n %}
 {% load l10n %}
 {% load staticfiles %}
 {% get_current_language as lang %}
-<!DOCTYPE html>
-<html lang="{{lang}}">
-  <head>
-    <meta charset="utf-8">
-    <title>{% block title %}Firewall GUI{% endblock %}</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+{% block extra_link %}
  <link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:200,400&amp;subset=latin,latin-ext' rel='stylesheet' type='text/css'>
-    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
-    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
-    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
  <link href="{% static "network/network.css" %}" rel="stylesheet">
-    <style type="text/css">
+{% endblock %}
+
+{% block extra_css %}
+<style type="text/css">
  body {
    padding-top:40px;
  }
@@ -30,67 +27,25 @@
  .messagelist {
      margin-top: 25px;
  }
-    </style>
+</style>
+{% endblock %}

-    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
-    <!--[if lt IE 9]>
-      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
-    {% block extra_css %}{% endblock %}
-  </head>
-  <body>
-    <div class="navbar navbar-inverse navbar-fixed-top">
-        <div class="navbar-header">  
+{% block navbar-brand %}
  <a class="navbar-brand" href="{% url "network.index" %}">CIRCLE Network</a>
-            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-            </button>
-        </div><!-- .navbar-header -->
-        <div class="collapse navbar-collapse">
+{% endblock %}
+
+{% block navbar %}
  <ul class="nav navbar-nav">
   {% include "network/menu.html" %}
  </ul>
  <a class="navbar-brand pull-right" href="{% url "dashboard.index" %}"
-                style="color: white; font-size: 10px;"><i class="icon-dashboard"></i> {% trans "dashboard" %}</a>
-        </div><!-- .collapse .navbar-collapse -->
-    </div><!-- navbar navbar-inverse navbar-fixed-top -->
-    <div class="container">
-        {% block messages %}
-        {% if messages %}
-        <div class="messagelist">
-        {% for message in messages %}
-        <div class="alert
-            {% if message.tags %} alert-{% if message.tags == "error" %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}">
-            {{ message }}
-        </div>
-        {% endfor %}
-        </div>
-        {% endif %}
-        {% endblock messages %}
-        {% block content %}
-        <div class="alert-block">This is an abstract base template.</div>
-        {% endblock %}
-    </div><!-- .container -->
-
-    <div class="footer-container container">
-        <footer>
-            <p class="pull-right"><a href="#">Vissza az oldal tetejére</a></p>
-            <p>&copy; {{ COMPANY_NAME }}
-        </footer>
-    </div><!-- .footer-container .container -->
+      style="color: white; font-size: 10px;">
+    <i class="fa fa-dashboard"></i>
+    {% trans "dashboard" %}
+  </a>
+{% endblock %}

-    <script src="//code.jquery.com/jquery-latest.js"></script>
-    <script src="{{ STATIC_URL }}jsi18n/{{ LANGUAGE_CODE }}/djangojs.js"></script>
-    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
+{% block extra_script %}
  <script src="{% static "js/bootbox.min.js" %}"></script>
  <script src="{% static "js/network.js" %}"></script>
-    <script>
-    {% block extra_js %}
-    {% endblock %}
-    </script>
-    {% block extra_etc %}
-    {% endblock %}
-  </body>
-</html>
+{% endblock %}
--- a/circle/network/templates/network/blacklist-edit.html
+++ b/circle/network/templates/network/blacklist-edit.html
@@ -7,7 +7,7 @@

 {% block content %}
 <div class="page-header">
-    <a href="{% url "network.blacklist_delete" pk=blacklist_pk %}" class="btn btn-danger pull-right"><i class="icon-remove-sign"></i> {% trans "Delete this blaclist item" %}</a>
+    <a href="{% url "network.blacklist_delete" pk=blacklist_pk %}" class="btn btn-danger pull-right"><i class="fa fa-times-circle"></i> {% trans "Delete this blaclist item" %}</a>
    <h2>{{ form.ipv4.value }} <small>{{ form.type.value }}</small></h2>
 </div>
 <div class="row">

--- a/circle/network/templates/network/blacklist-list.html
+++ b/circle/network/templates/network/blacklist-list.html
@@ -6,7 +6,7 @@

 {% block content %}
 <div class="page-header">
-    <a href="{% url "network.blacklist_create" %}" class="btn btn-success pull-right"><i class="icon-plus-sign"></i> {% trans "Create a new blacklist item" %}</a>
+    <a href="{% url "network.blacklist_create" %}" class="btn btn-success pull-right"><i class="fa fa-plus-circle"></i> {% trans "Create a new blacklist item" %}</a>
    <h1>{% trans "Blacklist" %} <small></small></h1>
 </div>


--- a/circle/network/templates/network/columns/color-desc.html
+++ b/circle/network/templates/network/columns/color-desc.html
@@ -4,7 +4,7 @@
 {# <span style="color: #FF0000;">[{{ record.r_type }}]</span> #}
 {% if record.direction == "1" %}{{ record.foreign_network }}{% else %}{{ record.r_type }}{% endif %}
 {#<span style="color: #0000FF;"> ▸ </span>#}
-<i class="icon-arrow-right"></i>
+<i class="fa fa-arrow-right"></i>
 {% if record.direction == "0" %}{{ record.foreign_network }}{% else %}{{ record.r_type }}{% endif %}
 <span style="color: #00FF00;">
    {% if record.proto %}

--- a/circle/network/templates/network/columns/host-rule-action.html
+++ b/circle/network/templates/network/columns/host-rule-action.html
--- a/circle/network/templates/network/columns/host-rule.html
+++ b/circle/network/templates/network/columns/host-rule.html
--- a/circle/network/templates/network/columns/records-address.html
+++ b/circle/network/templates/network/columns/records-address.html
--- a/circle/network/templates/network/confirm/base_delete.html
+++ b/circle/network/templates/network/confirm/base_delete.html
--- a/circle/network/templates/network/confirm/remove_host_group.html
+++ b/circle/network/templates/network/confirm/remove_host_group.html
--- a/circle/network/templates/network/dashboard.html
+++ b/circle/network/templates/network/dashboard.html
--- a/circle/network/templates/network/domain-edit.html
+++ b/circle/network/templates/network/domain-edit.html
--- a/circle/network/templates/network/domain-list.html
+++ b/circle/network/templates/network/domain-list.html
--- a/circle/network/templates/network/group-edit.html
+++ b/circle/network/templates/network/group-edit.html
--- a/circle/network/templates/network/group-list.html
+++ b/circle/network/templates/network/group-list.html
--- a/circle/network/templates/network/host-edit.html
+++ b/circle/network/templates/network/host-edit.html
--- a/circle/network/templates/network/host-list.html
+++ b/circle/network/templates/network/host-list.html
--- a/circle/network/templates/network/menu.html
+++ b/circle/network/templates/network/menu.html
--- a/circle/network/templates/network/record-create.html
+++ b/circle/network/templates/network/record-create.html
--- a/circle/network/templates/network/record-edit.html
+++ b/circle/network/templates/network/record-edit.html
--- a/circle/network/templates/network/record-list.html
+++ b/circle/network/templates/network/record-list.html
--- a/circle/network/templates/network/rule-edit.html
+++ b/circle/network/templates/network/rule-edit.html
--- a/circle/network/templates/network/rule-list.html
+++ b/circle/network/templates/network/rule-list.html
--- a/circle/network/templates/network/switch-port-edit.html
+++ b/circle/network/templates/network/switch-port-edit.html
--- a/circle/network/templates/network/switch-port-list.html
+++ b/circle/network/templates/network/switch-port-list.html
--- a/circle/network/templates/network/vlan-edit.html
+++ b/circle/network/templates/network/vlan-edit.html
--- a/circle/network/templates/network/vlan-group-edit.html
+++ b/circle/network/templates/network/vlan-group-edit.html
--- a/circle/network/templates/network/vlan-group-list.html
+++ b/circle/network/templates/network/vlan-group-list.html
--- a/circle/network/templates/network/vlan-list.html
+++ b/circle/network/templates/network/vlan-list.html
--- a/circle/templates/registration/base.html
+++ b/circle/templates/registration/base.html
--- a/circle/templates/registration/login.html
+++ b/circle/templates/registration/login.html
--- a/circle/templates/registration/password_reset_complete.html
+++ b/circle/templates/registration/password_reset_complete.html
--- a/circle/templates/registration/password_reset_confirm.html
+++ b/circle/templates/registration/password_reset_confirm.html
--- a/circle/templates/registration/password_reset_done.html
+++ b/circle/templates/registration/password_reset_done.html
--- a/circle/templates/registration/password_reset_form.html
+++ b/circle/templates/registration/password_reset_form.html
--- a/circle/vm/models/instance.py
+++ b/circle/vm/models/instance.py
--- a/circle/vm/models/node.py
+++ b/circle/vm/models/node.py
--- a/circle/vm/tests/test_models.py
+++ b/circle/vm/tests/test_models.py