--- a/client/src/components/Sidebar.vue	Thu Nov 22 17:00:26 2018 +0100
+++ b/client/src/components/Sidebar.vue	Fri Nov 23 10:24:29 2018 +0100
@@ -2,58 +2,58 @@
     <div :class="sidebarStyle">
         <div
             @click="$store.commit('application/showSidebar', !showSidebar)"
-            class="menubutton p-2 bg-white rounded position-absolute d-flex justify-content-center"
+            class="menubutton ui-element d-print-none p-2 bg-white rounded position-absolute d-flex justify-content-center"
         >
-            <i class="ui-element d-print-none fa fa-bars"></i>
+            <font-awesome-icon icon="bars"></font-awesome-icon>
         </div>
         <div class="menu text-nowrap text-left">
               <router-link to="/">
-                  <i class="fa fa-map-o"></i>
+                  <font-awesome-icon icon="map-marked-alt" fixed-width></font-awesome-icon>
                   Map
               </router-link>
               <a href="#"
                  @click="toggleContextBox('bottlenecks')"
                  :class="['secondary', { active: isActive('bottlenecks') }]">
-                  <i class="fa fa-ship"></i>
+                  <font-awesome-icon icon="ship" fixed-width></font-awesome-icon>
                   Bottlenecks
               </a>
               <div v-if="isWaterwayAdmin">
                 <a href="#"
                    @click="toggleContextBox('imports')"
                    :class="['secondary', { active: isActive('imports') }]">
-                      <i class="fa fa-upload align-self-center navicon"></i>
+                      <font-awesome-icon icon="upload" fixed-width></font-awesome-icon>
                       Import soundingresults
                   </a>
                   <a href="#"
                      @click="toggleContextBox('staging')"
                      :class="['secondary', { active: isActive('staging') }]">
-                      <i class="fa fa-list-ol align-self-center navicon"></i>
+                      <font-awesome-icon icon="clipboard-check" fixed-width></font-awesome-icon>
                       Staging area
                   </a>
                   <small class="text-muted pl-3">Systemadministration</small>
                   <hr class="m-0">
                   <router-link to="usermanagement">
-                      <i class="fa fa-address-card-o"></i>
+                      <font-awesome-icon icon="users-cog" fixed-width></font-awesome-icon>
                       Users
                   </router-link>
               </div>
               <div v-if="isSysAdmin">
                   <router-link to="systemconfiguration">
-                      <i class="fa fa-wrench"></i>
+                      <font-awesome-icon icon="wrench" fixed-width></font-awesome-icon>
                       Systemconfiguration
                   </router-link>
                   <router-link to="logs">
-                      <i class="fa fa-book"></i>
+                      <font-awesome-icon icon="book" fixed-width></font-awesome-icon>
                       Logs
                   </router-link>
                   <router-link to="importqueue">
-                      <i class="fa fa-exchange"></i>
+                      <font-awesome-icon icon="tasks" fixed-width></font-awesome-icon>
                       Importqueue
                   </router-link>
               </div>
               <hr class="m-0">
               <a href="#" @click="logoff">
-                  <i class="fa fa-power-off"></i>
+                  <font-awesome-icon icon="power-off" fixed-width></font-awesome-icon>
                   Logout {{ user }}
               </a>
         </div>
@@ -138,23 +138,22 @@
     padding: 0.5rem 1rem
     color: #333
     text-decoration: none
-    i
-      color: #666
-      margin-right: $small-offset
+    svg path
+      fill: #666
     &:hover
       background-color: #f8f8f8
     &.router-link-exact-active
       background-color: $color-info
       color: #fff
-      i
-        color: #fff
+      svg path
+        fill: #fff
     &.secondary
       font-size: 0.9rem
       &.active
         background: lighten($color-info, 55)
         color: darken($color-info, 15)
-        i
-          color: darken($color-info, 15)
+        svg path
+          fill: darken($color-info, 15)
 
 .sidebar
   background-color: #ffffff
@@ -164,8 +163,8 @@
   overflow: hidden
 
 .sidebarcollapsed
-  max-height: 30px
-  max-width: 30px
+  max-height: $icon-height
+  max-width: $icon-width
 
 .sidebarextended
   max-height: 35rem