webui: Updated icons to use Font Awesome (#5468)

AUTHORS.md

@@ -166,6 +166,7 @@ LibreNMS contributors:
 - Julian Kornberger <jk+github@digineo.de> (corny)
 - ant Kenworthy <git@manchetermonkey.co.uk> (mcrmonkey)
 - Aleksandr Stankevic <aleksandr.stankevic@gmail.com> (sysmonk)
+- Richard Mayhew <richard@splash.co.za> (InsaneSplash)
 - Jacob <wackychocolatefactory@gmail.com> (wackychocolatefactory)
 
 [1]: http://observium.org/ "Observium web site"

html/css/dark.css

@@ -18,6 +18,10 @@
     color: #e30613;
 }
 
+.icon-theme {
+    color: black;
+}
+
 .twitter-typeahead .tt-hint {
     border-color: #000 !important;
 }

html/css/light.css

@@ -18,6 +18,10 @@
     color: #e30613;
 }
 
+.icon-theme {
+    color: black;
+}
+
 .pace {
   -webkit-pointer-events: none;
   pointer-events: none;

html/css/mono.css

@@ -18,6 +18,11 @@
     color: #e30613;
 }
 
+.icon-theme {
+    color: black;
+}
+
+
 .twitter-typeahead .tt-hint {
     border-color: #000 !important;
 }

html/includes/dev-overview-data.inc.php

@@ -7,7 +7,7 @@ echo "<div class='row'>
             <div class='panel-heading'>";
 
 if ($config['overview_show_sysDescr']) {
-    echo '<strong>'.$device['sysDescr'].'</strong>';
+    echo '<i class="fa fa-id-card fa-lg icon-theme" aria-hidden="true"></i> <strong>'.$device['sysDescr'].'</strong>';
 }
 
 echo '</div>

html/includes/hostbox-menu.inc.php

@@ -16,27 +16,27 @@ echo '<td>';
 if (device_permitted($device['device_id'])) {
     echo '<div class="row">
         <div class="col-xs-1">';
-    echo '<a href="'.generate_device_url($device).'"> <img src="images/16/server.png" border="0" align="absmiddle" alt="View device" title="View device" /></a> ';
+    echo '<a href="'.generate_device_url($device).'">  <i class="fa fa-server fa-lg icon-theme" title="View device" aria-hidden="true"></i></a> ';
     echo '</div>
         <div class="col-xs-1">';
-    echo '<a href="'.generate_device_url($device, array('tab' => 'alerts')).'"> <img src="images/16/bell.png" border="0" align="absmiddle" alt="View alerts" title="View alerts"  /></a> ';
+    echo '<a href="'.generate_device_url($device, array('tab' => 'alerts')).'"> <i class="fa fa-exclamation-circle fa-lg icon-theme"  title="View alerts" aria-hidden="true"></i></a> ';
     echo '</div>';
     if ($_SESSION['userlevel'] >= '7') {
         echo '<div class="col-xs-1">
-            <a href="'.generate_device_url($device, array('tab' => 'edit')).'"> <img src="images/16/wrench.png" border="0" align="absmiddle" alt="Edit device" title="Edit device" /></a>
+            <a href="'.generate_device_url($device, array('tab' => 'edit')).'"> <i class="fa fa-pencil fa-lg icon-theme"  title="Edit ports" aria-hidden="true"></i></a>
             </div>';
     }
 
     echo '</div>
         <div class="row">
         <div class="col-xs-1">
-        <a href="telnet://'.$device['hostname'].'"><img src="images/16/telnet.png" alt="telnet" title="Telnet to '.$device['hostname'].'" border="0" width="16" height="16"></a>
+        <a href="telnet://'.$device['hostname'].'"><i class="fa fa-terminal fa-lg icon-theme"  title="Telnet to ' . $device['hostname'] . '"></a>
         </div>
         <div class="col-xs-1">
-        <a href="ssh://'.$device['hostname'].'"><img src="images/16/ssh.png" alt="ssh" title="SSH to '.$device['hostname'].'" border="0" width="16" height="16"></a>
+        <a href="ssh://'.$device['hostname'].'"><i class="fa fa-lock fa-lg icon-theme"  title="SSH to ' . $device['hostname'] . '"></a>
         </div>
         <div class="col-xs-1">
-        <a href="https://'.$device['hostname'].'"><img src="images/16/http.png" alt="https" title="Launch browser https://'.$device['hostname'].'" border="0" width="16" height="16" target="_blank" rel="noopener"></a>
+        <a href="https://' . $device['hostname'] . '" target="_blank" rel="noopener"><i class="fa fa-globe fa-lg icon-theme"  title="Launch browser https://' . $device['hostname'] . '"></i></a>
         </div>
         </div>';
 }//end if

html/includes/print-interface.inc.php

@@ -27,7 +27,7 @@ if ($port['ifInErrors_delta'] > 0 || $port['ifOutErrors_delta'] > 0) {
 }
 
 if (dbFetchCell('SELECT COUNT(*) FROM `mac_accounting` WHERE `port_id` = ?', array($port['port_id']))) {
-    $mac = "<a href='".generate_port_url($port, array('view' => 'macaccounting'))."'><img src='images/16/chart_curve.png' align='absmiddle'></a>";
+    $mac = "<a href='".generate_port_url($port, array('view' => 'macaccounting'))."'><i class='fa fa-pie-chart fa-lg icon-theme' aria-hidden='true'></i></a>";
 } else {
     $mac = '';
 }
@@ -84,10 +84,10 @@ if ($port['ifOperStatus'] == 'up') {
     $port['out_rate'] = ($port['ifOutOctets_rate'] * 8);
     $in_perc          = @round(($port['in_rate'] / $port['ifSpeed'] * 100));
     $out_perc         = @round(($port['in_rate'] / $port['ifSpeed'] * 100));
-    echo "<img src='images/16/arrow_left.png' align=absmiddle> <span style='color: ".percent_colour($in_perc)."'>".formatRates($port['in_rate'])."<br />
+    echo "<i class='fa fa-long-arrow-left fa-lg' style='color:green' aria-hidden='true'></i> <span style='color: ".percent_colour($in_perc)."'>".formatRates($port['in_rate'])."<br />
-        <img align=absmiddle src='images/16/arrow_out.png'> <span style='color: ".percent_colour($out_perc)."'>".formatRates($port['out_rate'])."<br />
+        <i class='fa fa-long-arrow-right fa-lg' style='color:blue' aria-hidden='true'></i> <span style='color: ".percent_colour($out_perc)."'>".formatRates($port['out_rate'])."<br />
-        <img src='images/icons/arrow_pps_in.png' align=absmiddle> ".format_bi($port['ifInUcastPkts_rate'])."pps</span><br />
+        <i class='fa fa-long-arrow-left fa-lg' style='color:purple' aria-hidden='true'></i> ".format_bi($port['ifInUcastPkts_rate'])."pps</span><br />
-        <img src='images/icons/arrow_pps_out.png' align=absmiddle> ".format_bi($port['ifOutUcastPkts_rate']).'pps</span>';
+        <i class='fa fa-long-arrow-right fa-lg' style='color:darkorange' aria-hidden='true'></i> ".format_bi($port['ifOutUcastPkts_rate']).'pps</span>';
 }
 
 echo "</td><td width=75 onclick=\"location.href='".generate_port_url($port)."'\" >";
@@ -231,7 +231,7 @@ if (strpos($port['label'], 'oopback') === false && !$graph_type) {
     }//end if
 
     if (count($int_links) > 3) {
-        echo '<div class="collapse-neighbors"><i class="neighbors-button fa fa-plus" aria-hidden="true"></i>
+        echo '<div class="collapse-neighbors"><i class="neighbors-button fa fa-plus fa-lg" aria-hidden="true"></i>
                <span class="neighbors-interface-list-firsts" style="display: inline;">';
     }
 
@@ -248,9 +248,9 @@ if (strpos($port['label'], 'oopback') === false && !$graph_type) {
             echo "$br";
 
             if ($int_links_phys[$int_link]) {
-                echo "<img align=absmiddle src='images/16/connect.png'> ";
+                echo "<i class='fa fa-plus fa-lg' style='color:black' aria-hidden='true'></i> ";
             } else {
-                echo "<img align=absmiddle src='images/16/bullet_go.png'> ";
+                echo "<i class='fa fa-arrow-right fa-lg' style='color:green' aria-hidden='true'></i> ";
             }
 
             echo '<b>'.generate_port_link($link_if, makeshortif($link_if['label'])).' on '.generate_device_link($link_if, shorthost($link_if['hostname']));
@@ -277,25 +277,25 @@ if ($port_details && $config['enable_port_relationship'] === true && port_permit
         $pw_peer_int = dbFetchRow('SELECT * FROM `ports` AS I, pseudowires AS P WHERE I.device_id = ? AND P.cpwVcID = ? AND P.port_id = I.port_id', array($pseudowire['peer_device_id'], $pseudowire['cpwVcID']));
 
         $pw_peer_int = ifNameDescr($pw_peer_int);
-        echo "$br<img src='images/16/arrow_switch.png' align=absmiddle><b> ".generate_port_link($pw_peer_int, makeshortif($pw_peer_int['label'])).' on '.generate_device_link($pw_peer_dev, shorthost($pw_peer_dev['hostname'])).'</b>';
+        echo "$br<i class='fa fa-cube fa-lg' style='color:green' aria-hidden='true'></i><b> ".generate_port_link($pw_peer_int, makeshortif($pw_peer_int['label'])).' on '.generate_device_link($pw_peer_dev, shorthost($pw_peer_dev['hostname'])).'</b>';
         $br = '<br />';
     }
 
     foreach (dbFetchRows('SELECT * FROM `ports` WHERE `pagpGroupIfIndex` = ? and `device_id` = ?', array($port['ifIndex'], $device['device_id'])) as $member) {
-        echo "$br<img src='images/16/brick_link.png' align=absmiddle> <strong>".generate_port_link($member).' (PAgP)</strong>';
+        echo "$br<i class='fa fa-cube fa-lg icon-theme' aria-hidden='true'></i> <strong>".generate_port_link($member).' (PAgP)</strong>';
         $br = '<br />';
     }
 
     if ($port['pagpGroupIfIndex'] && $port['pagpGroupIfIndex'] != $port['ifIndex']) {
         $parent = dbFetchRow('SELECT * FROM `ports` WHERE `ifIndex` = ? and `device_id` = ?', array($port['pagpGroupIfIndex'], $device['device_id']));
-        echo "$br<img src='images/16/bricks.png' align=absmiddle> <strong>".generate_port_link($parent).' (PAgP)</strong>';
+        echo "$br<i class='fa fa-cube fa-lg icon-theme' aria-hidden='true'></i> <strong>".generate_port_link($parent).' (PAgP)</strong>';
         $br = '<br />';
     }
 
     foreach (dbFetchRows('SELECT * FROM `ports_stack` WHERE `port_id_low` = ? and `device_id` = ?', array($port['ifIndex'], $device['device_id'])) as $higher_if) {
         if ($higher_if['port_id_high']) {
             $this_port = get_port_by_index_cache($device['device_id'], $higher_if['port_id_high']);
-            echo "$br<img src='images/16/arrow_divide.png' align=absmiddle> <strong>".generate_port_link($this_port).'</strong>';
+            echo "$br<i class='fa fa-expand fa-lg icon-theme' aria-hidden='true'></i> <strong>".generate_port_link($this_port).'</strong>';
             $br = '<br />';
         }
     }
@@ -303,7 +303,7 @@ if ($port_details && $config['enable_port_relationship'] === true && port_permit
     foreach (dbFetchRows('SELECT * FROM `ports_stack` WHERE `port_id_high` = ? and `device_id` = ?', array($port['ifIndex'], $device['device_id'])) as $lower_if) {
         if ($lower_if['port_id_low']) {
             $this_port = get_port_by_index_cache($device['device_id'], $lower_if['port_id_low']);
-            echo "$br<img src='images/16/arrow_join.png' align=absmiddle> <strong>".generate_port_link($this_port).'</strong>';
+            echo "$br<i class='fa fa-compress fa-lg icon-theme' aria-hidden='true'></i> <strong>".generate_port_link($this_port).'</strong>';
             $br = '<br />';
         }
     }

html/includes/print-menubar.php

@@ -48,14 +48,14 @@ if ($config['title_image']) {
     <div class="collapse navbar-collapse" id="navHeaderCollapse">
       <ul class="nav navbar-nav">
         <li class="dropdown">
-          <a href="<?php echo(generate_url(array('page'=>'overview'))); ?>" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><i class="fa fa-lightbulb-o fa-fw fa-lg fa-nav-icons hidden-md" aria-hidden="true"></i> <span class="hidden-sm">Overview</span></a>
+          <a href="<?php echo(generate_url(array('page'=>'overview'))); ?>" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><i class="fa fa-home fa-fw fa-lg fa-nav-icons hidden-md" aria-hidden="true"></i> <span class="hidden-sm">Overview</span></a>
           <ul class="dropdown-menu multi-level" role="menu">
-              <li><a href="<?php echo(generate_url(array('page'=>'overview'))); ?>"><i class="fa fa-lightbulb-o fa-fw fa-lg" aria-hidden="true"></i> Overview</a></li>
+              <li><a href="<?php echo(generate_url(array('page'=>'overview'))); ?>"><i class="fa fa-tv fa-fw fa-lg" aria-hidden="true"></i> Dashboard</a></li>
            <li class="dropdown-submenu">
-            <a href="<?php echo(generate_url(array('page'=>'overview'))); ?>"><i class="fa fa-sitemap fa-fw fa-lg" aria-hidden="true"></i> Maps</a>
+            <a href="<?php echo(generate_url(array('page'=>'overview'))); ?>"><i class="fa fa-map fa-fw fa-lg" aria-hidden="true"></i> Maps</a>
             <ul class="dropdown-menu">
               <li><a href="<?php echo(generate_url(array('page'=>'availability-map'))); ?>"><i class="fa fa-arrow-circle-up fa-fw fa-lg" aria-hidden="true"></i> Availability</a></li>
-              <li><a href="<?php echo(generate_url(array('page'=>'map'))); ?>"><i class="fa fa-desktop fa-fw fa-lg" aria-hidden="true"></i> Network</a></li>
+              <li><a href="<?php echo(generate_url(array('page'=>'map'))); ?>"><i class="fa fa-sitemap fa-fw fa-lg" aria-hidden="true"></i> Network</a></li>
                 <?php
                     require_once '../includes/device-groups.inc.php';
                     $devices_groups = GetDeviceGroups();
@@ -88,7 +88,7 @@ if ($config['title_image']) {
           <li class="dropdown-submenu">
            <a href="<?php echo(generate_url(array('page'=>'overview'))); ?>"><i class="fa fa-wrench fa-fw fa-lg" aria-hidden="true"></i> Tools</a>
            <ul class="dropdown-menu scrollable-menu">
-           <li><a href="<?php echo(generate_url(array('page'=>'ripenccapi'))); ?>"><i class="fa fa-arrow-circle-up fa-fw fa-lg" aria-hidden="true"></i> RIPE NCC API</a></li>
+           <li><a href="<?php echo(generate_url(array('page'=>'ripenccapi'))); ?>"><i class="fa fa-chevron-right fa-fw fa-lg" aria-hidden="true"></i> RIPE NCC API</a></li>
 <?php
 if ($config['oxidized']['enabled'] === true && isset($config['oxidized']['url'])) {
     echo '<li><a href="'.generate_url(array('page'=>'oxidized')).'"><i class="fa fa-arrow-circle-up fa-fw fa-lg" aria-hidden="true"></i> Oxidized</a></li>';
@@ -121,10 +121,9 @@ if (dbFetchCell("SELECT 1 from `packages` LIMIT 1")) {
 } # if ($packages)
 ?>
             <li role="presentation" class="divider"></li>
-            <li role="presentation" class="dropdown-header"> Search</li>
+            <li><a href="<?php echo(generate_url(array('page'=>'search','search'=>'ipv4'))); ?>"><i class="fa fa-search fa-fw fa-lg" aria-hidden="true"></i> IPv4 Address</a></li>
-            <li><a href="<?php echo(generate_url(array('page'=>'search','search'=>'ipv4'))); ?>"><i class="fa fa-search fa-fw fa-lg" aria-hidden="true"></i> IPv4 Search</a></li>
+            <li><a href="<?php echo(generate_url(array('page'=>'search','search'=>'ipv6'))); ?>"><i class="fa fa-search fa-fw fa-lg" aria-hidden="true"></i> IPv6 Address</a></li>
-            <li><a href="<?php echo(generate_url(array('page'=>'search','search'=>'ipv6'))); ?>"><i class="fa fa-search fa-fw fa-lg" aria-hidden="true"></i> IPv6 Search</a></li>
+            <li><a href="<?php echo(generate_url(array('page'=>'search','search'=>'mac'))); ?>"><i class="fa fa-search fa-fw fa-lg" aria-hidden="true"></i> MAC Address</a></li>
-            <li><a href="<?php echo(generate_url(array('page'=>'search','search'=>'mac'))); ?>"><i class="fa fa-search fa-fw fa-lg" aria-hidden="true"></i> MAC Search</a></li>
             <li><a href="<?php echo(generate_url(array('page'=>'search','search'=>'arp'))); ?>"><i class="fa fa-search fa-fw fa-lg" aria-hidden="true"></i> ARP Tables</a></li>
 <?php
 if (is_module_enabled('poller', 'mib')) {
@@ -184,11 +183,11 @@ if ($_SESSION['userlevel'] >= '10') {
                 echo('
                     <li role="presentation" class="divider"></li>
                     <li class="dropdown-submenu">
-                    <a href="#"><i class="fa fa-map-marker fa-fw fa-lg" aria-hidden="true"></i> Locations</a>
+                    <a href="#"><i class="fa fa-map-marker fa-fw fa-lg" aria-hidden="true"></i> Geo Locations</a>
                     <ul class="dropdown-menu scrollable-menu">
                 ');
                 foreach ($locations as $location) {
-                    echo('            <li><a href="devices/location=' . urlencode($location) . '/"><i class="fa fa-building-o fa-fw fa-lg" aria-hidden="true"></i> ' . $location . ' </a></li>');
+                    echo('            <li><a href="devices/location=' . urlencode($location) . '/"><i class="fa fa-building fa-fw fa-lg" aria-hidden="true"></i> ' . $location . ' </a></li>');
                 }
                 echo('
                     </ul>
@@ -211,8 +210,9 @@ if ($_SESSION['userlevel'] >= '10') {
     }
 
      echo '
-            <li><a href="addhost/"><i class="fa fa-plus fa-col-success fa-fw fa-lg" aria-hidden="true"></i> Add Device</a></li>
+            <li role="presentation" class="divider"></li>
-            <li><a href="delhost/"><i class="fa fa-trash fa-col-info fa-fw fa-lg" aria-hidden="true"></i> Delete Device</a></li>';
+            <li><a href="addhost/"><i class="fa fa-plus fa-fw fa-lg" aria-hidden="true"></i> Add Device</a></li>
+            <li><a href="delhost/"><i class="fa fa-trash fa-fw fa-lg" aria-hidden="true"></i> Delete Device</a></li>';
 }
 
 ?>
@@ -233,17 +233,17 @@ if ($config['show_services']) {
 if (($service_status[1] > 0) || ($service_status[2] > 0)) {
     echo '            <li role="presentation" class="divider"></li>';
     if ($service_status[1] > 0) {
-        echo '            <li><a href="services/state=warning/"><i class="fa fa-bell-o fa-col-warning fa-fw fa-lg" aria-hidden="true"></i> Warning ('.$service_status[1].')</a></li>';
+        echo '            <li><a href="services/state=warning/"><i class="fa fa-bell fa-col-warning fa-fw fa-lg" aria-hidden="true"></i> Warning ('.$service_status[1].')</a></li>';
     }
     if ($service_status[2] > 0) {
-        echo '            <li><a href="services/state=critical/"><i class="fa fa-bell-o fa-col-danger fa-fw fa-lg" aria-hidden="true"></i> Critical ('.$service_status[2].')</a></li>';
+        echo '            <li><a href="services/state=critical/"><i class="fa fa-bell fa-col-danger fa-fw fa-lg" aria-hidden="true"></i> Critical ('.$service_status[2].')</a></li>';
     }
 }
 
 if ($_SESSION['userlevel'] >= '10') {
     echo('
             <li role="presentation" class="divider"></li>
-            <li><a href="addsrv/"><i class="fa fa-cog fa-col-success fa-fw fa-lg" aria-hidden="true"></i> Add Service</a></li>');
+            <li><a href="addsrv/"><i class="fa fa-plus fa-fw fa-lg" aria-hidden="true"></i> Add Service</a></li>');
 }
 ?>
           </ul>
@@ -298,15 +298,15 @@ if ($_SESSION['userlevel'] >= '5') {
         $ifbreak = 1;
     }
     if ($config['int_peering']) {
-        echo('            <li><a href="iftype/type=peering/"><i class="fa fa-user-plus fa-fw fa-lg" aria-hidden="true"></i> Peering</a></li>');
+        echo('            <li><a href="iftype/type=peering/"><i class="fa fa-handshake-o fa-fw fa-lg" aria-hidden="true"></i> Peering</a></li>');
         $ifbreak = 1;
     }
     if ($config['int_peering'] && $config['int_transit']) {
-        echo('            <li><a href="iftype/type=peering,transit/"><i class="fa fa-user-secret fa-fw fa-lg" aria-hidden="true"></i> Peering + Transit</a></li>');
+        echo('            <li><a href="iftype/type=peering,transit/"><i class="fa fa-rocket fa-fw fa-lg" aria-hidden="true"></i> Peering + Transit</a></li>');
         $ifbreak = 1;
     }
     if ($config['int_core']) {
-        echo('            <li><a href="iftype/type=core/"><i class="fa fa-anchor fa-fw fa-lg" aria-hidden="true"></i> Core</a></li>');
+        echo('            <li><a href="iftype/type=core/"><i class="fa fa-code-fork fa-fw fa-lg" aria-hidden="true"></i> Core</a></li>');
         $ifbreak = 1;
     }
     if (is_array($config['custom_descr']) === false) {
@@ -336,8 +336,8 @@ foreach (dbFetchRows("SELECT * FROM `ports` AS P, `devices` as D WHERE P.`delete
 }
 ?>
 
-            <li><a href="ports/state=down/"><i class="fa fa-exclamation-triangle fa-col-danger fa-fw fa-lg" aria-hidden="true"></i> Down</a></li>
+            <li><a href="ports/state=down/"><i class="fa fa-arrow-circle-down fa-fw fa-lg" aria-hidden="true"></i> Down</a></li>
-            <li><a href="ports/state=admindown/"><i class="fa fa-pause fa-col-info fa-fw fa-lg" aria-hidden="true"></i> Disabled</a></li>
+            <li><a href="ports/state=admindown/"><i class="fa fa-arrow-circle-o-down fa-fw fa-lg" aria-hidden="true"></i> Disabled</a></li>
 <?php
 
 if ($deleted_ports) {
@@ -363,8 +363,8 @@ $menu_sensors = $used_sensors;
         <li class="dropdown">
           <a href="health/" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><i class="fa fa-heartbeat fa-fw fa-lg fa-nav-icons hidden-md" aria-hidden="true"></i> <span class="hidden-sm">Health</span></a>
           <ul class="dropdown-menu">
-            <li><a href="health/metric=mempool/"><i class="fa fa-gears fa-fw fa-lg" aria-hidden="true"></i> Memory</a></li>
+            <li><a href="health/metric=mempool/"><i class="fa fa-braille fa-fw fa-lg" aria-hidden="true"></i> Memory</a></li>
-            <li><a href="health/metric=processor/"><i class="fa fa-desktop fa-fw fa-lg" aria-hidden="true"></i> Processor</a></li>
+            <li><a href="health/metric=processor/"><i class="fa fa-microchip fa-fw fa-lg" aria-hidden="true"></i> Processor</a></li>
             <li><a href="health/metric=storage/"><i class="fa fa-database fa-fw fa-lg" aria-hidden="true"></i> Storage</a></li>
 <?php
 if ($menu_sensors) {
@@ -456,13 +456,13 @@ $routing_count['cisco-otv'] = count($otv);
 if ($_SESSION['userlevel'] >= '5' && ($routing_count['bgp']+$routing_count['ospf']+$routing_count['cef']+$routing_count['vrf']+$routing_count['cisco-otv']) > "0") {
 ?>
         <li class="dropdown">
-          <a href="routing/" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><i class="fa fa-arrows fa-fw fa-lg fa-nav-icons hidden-md" aria-hidden="true"></i> <span class="hidden-sm">Routing</span></a>
+          <a href="routing/" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><i class="fa fa-random fa-fw fa-lg fa-nav-icons hidden-md" aria-hidden="true"></i> <span class="hidden-sm">Routing</span></a>
           <ul class="dropdown-menu">
 <?php
     $separator = 0;
 
 if ($_SESSION['userlevel'] >= '5' && $routing_count['vrf']) {
-    echo('            <li><a href="routing/protocol=vrf/"><i class="fa fa-arrows-alt fa-fw fa-lg" aria-hidden="true"></i> VRFs</a></li>');
+    echo('            <li><a href="routing/protocol=vrf/"><i class="fa fa-arrows fa-fw fa-lg" aria-hidden="true"></i> VRFs</a></li>');
     $separator++;
 }
 
@@ -491,7 +491,7 @@ if ($_SESSION['userlevel'] >= '5' && $routing_count['bgp']) {
         echo('            <li role="presentation" class="divider"></li>');
         $separator = 0;
     }
-    echo('<li><a href="routing/protocol=bgp/type=all/graph=NULL/"><i class="fa fa-link fa-fw fa-lg" aria-hidden="true"></i> BGP All Sessions </a></li>
+    echo('<li><a href="routing/protocol=bgp/type=all/graph=NULL/"><i class="fa fa-circle-o fa-fw fa-lg" aria-hidden="true"></i> BGP All Sessions </a></li>
             <li><a href="routing/protocol=bgp/type=external/graph=NULL/"><i class="fa fa-external-link fa-fw fa-lg" aria-hidden="true"></i> BGP External</a></li>
             <li><a href="routing/protocol=bgp/type=internal/graph=NULL/"><i class="fa fa-external-link fa-rotate-180 fa-fw fa-lg" aria-hidden="true"></i> BGP Internal</a></li>');
 }
@@ -535,15 +535,15 @@ if ($alerts['active_count'] > 0) {
           <a href="#" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><i class="fa fa-exclamation-circle fa-col-<?php echo $alert_colour;?> fa-fw fa-lg fa-nav-icons hidden-md" aria-hidden="true"></i> <span class="hidden-sm">Alerts</span></a>
           <ul class="dropdown-menu">
               <li><a href="<?php echo(generate_url(array('page'=>'alerts'))); ?>"><i class="fa fa-bell fa-fw fa-lg" aria-hidden="true"></i> Notifications</a></li>
-              <li><a href="<?php echo(generate_url(array('page'=>'alert-log'))); ?>"><i class="fa fa-th-list fa-fw fa-lg" aria-hidden="true"></i> Historical Log</a></li>
+              <li><a href="<?php echo(generate_url(array('page'=>'alert-log'))); ?>"><i class="fa fa-file-text fa-fw fa-lg" aria-hidden="true"></i> Alert History</a></li>
               <li><a href="<?php echo(generate_url(array('page'=>'alert-stats'))); ?>"><i class="fa fa-bar-chart fa-fw fa-lg" aria-hidden="true"></i> Statistics</a></li>
                 <?php
                 if ($_SESSION['userlevel'] >= '10') {
                     ?>
-                  <li><a href="<?php echo(generate_url(array('page'=>'alert-rules'))); ?>"><i class="fa fa-tasks fa-fw fa-lg" aria-hidden="true"></i> Rules</a></li>
+                  <li><a href="<?php echo(generate_url(array('page'=>'alert-rules'))); ?>"><i class="fa fa-list fa-fw fa-lg" aria-hidden="true"></i> Alert Rules</a></li>
-                  <li><a href="<?php echo(generate_url(array('page'=>'alert-schedule'))); ?>"><i class="fa fa-calendar fa-fw fa-lg" aria-hidden="true"></i> Maintenance Windows</a></li>
+                  <li><a href="<?php echo(generate_url(array('page'=>'alert-schedule'))); ?>"><i class="fa fa-calendar fa-fw fa-lg" aria-hidden="true"></i> Scheduled Maintenance</a></li>
-                  <li><a href="<?php echo(generate_url(array('page'=>'alert-map'))); ?>"><i class="fa fa-link fa-fw fa-lg" aria-hidden="true"></i> Rule Mapping</a></li>
+                  <li><a href="<?php echo(generate_url(array('page'=>'alert-map'))); ?>"><i class="fa fa-connectdevelop fa-fw fa-lg" aria-hidden="true"></i> Rule Mapping</a></li>
-                  <li><a href="<?php echo(generate_url(array('page'=>'templates'))); ?>"><i class="fa fa-sitemap fa-fw fa-lg" aria-hidden="true"></i> Templates</a></li>
+                  <li><a href="<?php echo(generate_url(array('page'=>'templates'))); ?>"><i class="fa fa-file fa-fw fa-lg" aria-hidden="true"></i> Alert Templates</a></li>
                     <?php
                 }
                 ?>
@@ -577,7 +577,6 @@ if (empty($notifications['count']) && empty($notifications['sticky_count'])) {
     echo('<a href="#" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"><i class="fa fa-user fa-fw fa-lg fa-nav-icons" aria-hidden="true"></i> <span class="visible-xs-inline-block">User</span><span class="badge badge-navbar-user '.$class.'">'.($notifications['sticky_count']+$notifications['count']).'</span></a>');
 ?>
         <ul class="dropdown-menu">
-          <li role="presentation" class="dropdown-header"> Settings</li>
           <li><a href="preferences/"><i class="fa fa-cog fa-fw fa-lg" aria-hidden="true"></i> My Settings</a></li>
 <?php
     $notifications = new ObjectCache('notifications');
@@ -596,7 +595,6 @@ if ($_SESSION['authenticated']) {
       <li class="dropdown">
         <a href="#" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown" style="margin-left:5px"><i class="fa fa-cog fa-fw fa-lg fa-nav-icons" aria-hidden="true"></i> <span class="visible-xs-inline-block">Settings</span></a>
         <ul class="dropdown-menu">
-          <li role="presentation" class="dropdown-header"> Settings</li>
 <?php
 if ($_SESSION['userlevel'] >= '10') {
     echo('<li><a href="settings/"><i class="fa fa-cogs fa-fw fa-lg" aria-hidden="true"></i> Global Settings</a></li>');
@@ -604,7 +602,6 @@ if ($_SESSION['userlevel'] >= '10') {
 
 ?>
           <li role="presentation" class="divider"></li>
-          <li role="presentation" class="dropdown-header"> Users</li>
 
 <?php if ($_SESSION['userlevel'] >= '10') {
     if (auth_usermanagement()) {
@@ -614,19 +611,19 @@ if ($_SESSION['userlevel'] >= '10') {
            ');
     }
     echo('
-           <li><a href="edituser/"><i class="fa fa-user-secret fa-fw fa-lg" aria-hidden="true"></i> Edit User</a></li>
+           <li><a href="edituser/"><i class="fa fa-user-circle-o fa-fw fa-lg" aria-hidden="true"></i> Edit User</a></li>
-           <li><a href="authlog/"><i class="fa fa-key fa-fw fa-lg" aria-hidden="true"></i> Authlog</a></li>
+           <li><a href="authlog/"><i class="fa fa-shield fa-fw fa-lg" aria-hidden="true"></i> Auth History</a></li>
            <li role="presentation" class="divider"></li> ');
     echo('
            <li class="dropdown-submenu">
-               <a href="#"><i class="fa fa-clock-o fa-fw fa-lg" aria-hidden="true"></i> Pollers</a>
+               <a href="#"><i class="fa fa-th-large fa-fw fa-lg" aria-hidden="true"></i> Pollers</a>
                <ul class="dropdown-menu scrollable-menu">
-               <li><a href="poll-log/"><i class="fa fa-list-alt fa-fw fa-lg" aria-hidden="true"></i> Poll-log</a></li>');
+               <li><a href="poll-log/"><i class="fa fa-file-text fa-fw fa-lg" aria-hidden="true"></i> Poller History</a></li>');
 
     if ($config['distributed_poller'] === true) {
         echo ('
-                    <li><a href="pollers/tab=pollers/"><i class="fa fa-clock-o fa-fw fa-lg" aria-hidden="true"></i> Pollers</a></li>
+                    <li><a href="pollers/tab=pollers/"><i class="fa fa-th-large fa-fw fa-lg" aria-hidden="true"></i> Pollers</a></li>
-                    <li><a href="pollers/tab=groups/"><i class="fa fa-gears fa-fw fa-lg" aria-hidden="true"></i> Groups</a></li>');
+                    <li><a href="pollers/tab=groups/"><i class="fa fa-th fa-fw fa-lg" aria-hidden="true"></i> Poller Groups</a></li>');
     }
     echo ('
                </ul>
@@ -636,7 +633,7 @@ if ($_SESSION['userlevel'] >= '10') {
            <li class="dropdown-submenu">
            <a href="#"><i class="fa fa-code fa-fw fa-lg" aria-hidden="true"></i> API</a>
            <ul class="dropdown-menu scrollable-menu">
-             <li><a href="api-access/"><i class="fa fa-wrench fa-fw fa-lg" aria-hidden="true"></i> API Settings</a></li>
+             <li><a href="api-access/"><i class="fa fa-cog fa-fw fa-lg" aria-hidden="true"></i> API Settings</a></li>
              <li><a href="http://docs.librenms.org/API/API-Docs/" target="_blank" rel="noopener"><i class="fa fa-book fa-fw fa-lg" aria-hidden="true"></i> API Docs</a></li>
            </ul>
            </li>
@@ -655,7 +652,7 @@ if ($_SESSION['authenticated']) {
 ?>
 
            <li role="presentation" class="divider"></li>
-           <li><a href="about/"><i class="fa fa-exclamation-circle fa-fw fa-lg" aria-hidden="true"></i> About&nbsp;<?php echo($config['project_name']); ?></a></li>
+           <li><a href="about/"><i class="fa fa-info-circle fa-fw fa-lg" aria-hidden="true"></i> About&nbsp;<?php echo($config['project_name']); ?></a></li>
          </ul>
        </li>
      </ul>

html/includes/table/bills.inc.php

@@ -147,7 +147,7 @@ foreach (dbFetchRows($sql, $param) as $bill) {
     
     if (!$prev && is_admin()) {
         $actions .= "<a href='" . generate_url(array('page' => 'bill', 'bill_id' => $bill['bill_id'], 'view' => 'edit')) .
-            "'><img src='images/16/wrench.png' align=absmiddle alt='Edit'> Edit</a> ";
+            "'><i class='fa fa-pencil fa-lg icon-theme' title='Edit' aria-hidden='true'></i> Edit</a> ";
     }
     $predicted = format_bytes_billing(getPredictedUsage($bill['bill_day'], $tmp_used));
     

html/includes/table/devices.inc.php

@@ -166,12 +166,12 @@ foreach (dbFetchRows($sql, $param) as $device) {
     $actions = '
         <div class="container-fluid">
             <div class="row">
-                <div class="col-xs-1"><a href="' . generate_device_url($device) . '"> <img src="images/16/server.png" border="0" align="absmiddle" alt="View device" title="View device"></a></div>
+                <div class="col-xs-1"><a href="' . generate_device_url($device) . '"> <i class="fa fa-id-card fa-lg icon-theme" title="View device"></i></a></div>
-                <div class="col-xs-1"><a href="' . generate_device_url($device, array('tab' => 'alerts')) . '"> <img src="images/16/bell.png" border="0" align="absmiddle" alt="View alerts" title="View alerts"></a></div>
+                <div class="col-xs-1"><a href="' . generate_device_url($device, array('tab' => 'alerts')) . '"> <i class="fa fa-exclamation-circle fa-lg icon-theme" title="View alerts"></i></a></div>
     ';
 
     if ($_SESSION['userlevel'] >= '7') {
-        $actions .= '<div class="col-xs-1"><a href="' . generate_device_url($device, array('tab' => 'edit')) . '"> <img src="images/16/wrench.png" border="0" align="absmiddle" alt="Edit device" title="Edit device"></a></div>';
+        $actions .= '<div class="col-xs-1"><a href="' . generate_device_url($device, array('tab' => 'edit')) . '"> <i class="fa fa-pencil fa-lg icon-theme" title="Edit device"></i></a></div>';
     }
 
     if ($subformat == 'detail') {
@@ -179,9 +179,9 @@ foreach (dbFetchRows($sql, $param) as $device) {
     }
 
     $actions .= '
-                <div class="col-xs-1"><a href="telnet://' . $device['hostname'] . '"><img src="images/16/telnet.png" alt="telnet" title="Telnet to ' . $device['hostname'] . '" border="0" width="16" height="16"></a></div>
+                <div class="col-xs-1"><a href="telnet://' . $device['hostname'] . '"><i class="fa fa-terminal fa-lg icon-theme" title="Telnet to ' . $device['hostname'] . '"></i></a></div>
-                <div class="col-xs-1"><a href="ssh://' . $device['hostname'] . '"><img src="images/16/ssh.png" alt="ssh" title="SSH to ' . $device['hostname'] . '" border="0" width="16" height="16"></a></div>
+                <div class="col-xs-1"><a href="ssh://' . $device['hostname'] . '"><i class="fa fa-lock fa-lg icon-theme" title="SSH to ' . $device['hostname'] . '"></i></a></div>
-                <div class="col-xs-1"><a href="https://' . $device['hostname'] . '"><img src="images/16/http.png" alt="https" title="Launch browser https://' . $device['hostname'] . '" border="0" width="16" height="16" target="_blank" rel="noopener"></a></div>
+                <div class="col-xs-1"><a href="https://' . $device['hostname'] . '" target="_blank" rel="noopener"><i class="fa fa-globe fa-lg icon-theme" title="Launch browser https://' . $device['hostname'] . '"></i></a></div>
             </div>
         </div>
     ';
@@ -203,11 +203,11 @@ foreach (dbFetchRows($sql, $param) as $device) {
             $col_port = '';
         }
         if ($port_count) {
-            $col_port = '<img src="images/icons/port.png" align="absmiddle"> ' . $port_count . '<br>';
+            $col_port = '<i class="fa fa-link fa-lg icon-theme"></i> ' . $port_count . '<br>';
         }
 
         if ($sensor_count) {
-            $col_port .= '<img src="images/icons/sensors.png" align="absmiddle"> ' . $sensor_count;
+            $col_port .= '<i class="fa fa-dashboard fa-lg icon-theme"></i> ' . $sensor_count;
         }
     } else {
         $platform = $device['hardware'];

html/includes/table/ports.inc.php

@@ -144,12 +144,12 @@ foreach (dbFetchRows($query, $param) as $port) {
     $actions = '<div class="container-fluid"><div class="row">';
     $actions .= '<div class="col-xs-1"><a href="';
     $actions .= generate_device_url($device, array('tab' => 'alerts'));
-    $actions .= '"><img src="images/16/bell.png" border="0" align="absmiddle" alt="View alerts" title="View alerts" /></a></div>';
+    $actions .= '"><i class="fa fa-exclamation-circle fa-lg icon-theme" title="View alerts" aria-hidden="true"></i></a></div>';
 
     if ($_SESSION['userlevel'] >= '7') {
         $actions .= '<div class="col-xs-1"><a href="';
         $actions .= generate_device_url($device, array('tab' => 'edit', 'section' => 'ports'));
-        $actions .= '"><img src="images/16/wrench.png" border="0" align="absmiddle" alt="Edit ports" title="Edit ports" /></a></div>';
+        $actions .= '"><i class="fa fa-pencil fa-lg icon-theme" title="Edit ports" aria-hidden="true"></i></a></div>';
     }
 
     $actions .= '</div></div>';

html/index.php

@@ -335,28 +335,28 @@ if ($no_refresh !== true && $config['page_refresh'] != 0) {
     echo('<script type="text/javascript">
         $(document).ready(function() {
 
-           $("#countdown_timer_status").html("<i class=\"fa fa-pause fa-fw\"></i> Pause");
+           $("#countdown_timer_status").html("<i class=\"fa fa-pause fa-fw fa-lg\"></i> Pause");
            var Countdown = {
                sec: '. $config['page_refresh'] .',
 
                Start: function() {
                    var cur = this;
                    this.interval = setInterval(function() {
-                       $("#countdown_timer_status").html("<i class=\"fa fa-pause fa-fw\"></i> Pause");
+                       $("#countdown_timer_status").html("<i class=\"fa fa-pause fa-fw fa-lg\"></i> Pause");
                        cur.sec -= 1;
                        display_time = cur.sec;
                        if (display_time == 0) {
                            location.reload();
                        }
                        if (display_time % 1 === 0 && display_time <= 300) {
-                           $("#countdown_timer").html("<i class=\"fa fa-clock-o fa-fw\"></i> Refresh in " + display_time);
+                           $("#countdown_timer").html("<i class=\"fa fa-clock-o fa-fw fa-lg\"></i> Refresh in " + display_time);
                        }
                    }, 1000);
                },
 
                Pause: function() {
                    clearInterval(this.interval);
-                   $("#countdown_timer_status").html("<i class=\"fa fa-play fa-fw\"></i> Resume");
+                   $("#countdown_timer_status").html("<i class=\"fa fa-play fa-fw fa-lg\"></i> Resume");
                    delete this.interval;
                },
 
@@ -387,7 +387,7 @@ if ($no_refresh !== true && $config['page_refresh'] != 0) {
     var no_refresh = ' . var_export((bool)$no_refresh, true) . ';
     $(document).ready(function() {
         $("#countdown_timer").html("Refresh disabled");
-        $("#countdown_timer_status").html("<i class=\"fa fa-pause fa-fw\"></i>");
+        $("#countdown_timer_status").html("<i class=\"fa fa-pause fa-fw fa-lg\"></i>");
         $("#countdown_timer_status").click("", function(event) {
             event.preventDefault();
         });

html/pages/about.inc.php

@@ -98,40 +98,40 @@ if (dbFetchCell("SELECT `value` FROM `callback` WHERE `name` = 'uuid'") != '' &&
 }
 
 echo "
-        <td><img src='images/icons/device.png' class='optionicon'> <b>Devices</b></td><td class='text-right'>$stat_devices</td>
+        <td><i class='fa fa-server fa-lg icon-theme'  aria-hidden='true'></i> <b>Devices</b></td><td class='text-right'>$stat_devices</td>
-        <td><img src='images/icons/port.png' class='optionicon'> <b>Ports</b></td><td class='text-right'>$stat_ports</td>
+        <td><i class='fa fa-link fa-lg icon-theme'  aria-hidden='true'></i> <b>Ports</b></td><td class='text-right'>$stat_ports</td>
       </tr>
       <tr>
-        <td><img src='images/icons/ipv4.png'  class='optionicon'> <b>IPv4 Addresses<b></td><td class='text-right'>$stat_ipv4_addy</td>
+        <td><i class='fa fa-battery-empty fa-lg icon-theme'  aria-hidden='true'></i> <b>IPv4 Addresses<b></td><td class='text-right'>$stat_ipv4_addy</td>
-        <td><img src='images/icons/ipv4.png' class='optionicon'> <b>IPv4 Networks</b></td><td class='text-right'>$stat_ipv4_nets</td>
+        <td><i class='fa fa-battery-empty fa-lg icon-theme'  aria-hidden='true'></i> <b>IPv4 Networks</b></td><td class='text-right'>$stat_ipv4_nets</td>
       </tr>
       <tr>
-        <td><img src='images/icons/ipv6.png'  class='optionicon'> <b>IPv6 Addresses<b></td><td class='text-right'>$stat_ipv6_addy</td>
+        <td><i class='fa fa-battery-full fa-lg icon-theme'  aria-hidden='true'></i> <b>IPv6 Addresses<b></td><td class='text-right'>$stat_ipv6_addy</td>
-        <td><img src='images/icons/ipv6.png' class='optionicon'> <b>IPv6 Networks</b></td><td class='text-right'>$stat_ipv6_nets</td>
+        <td><i class='fa fa-battery-full fa-lg icon-theme'  aria-hidden='true'></i> <b>IPv6 Networks</b></td><td class='text-right'>$stat_ipv6_nets</td>
        </tr>
      <tr>
-        <td><img src='images/icons/services.png'  class='optionicon'> <b>Services<b></td><td class='text-right'>$stat_services</td>
+        <td><i class='fa fa-cogs fa-lg icon-theme'  aria-hidden='true'></i> <b>Services<b></td><td class='text-right'>$stat_services</td>
-        <td><img src='images/icons/apps.png' class='optionicon'> <b>Applications</b></td><td class='text-right'>$stat_apps</td>
+        <td><i class='fa fa-cubes fa-lg icon-theme'  aria-hidden='true'></i> <b>Applications</b></td><td class='text-right'>$stat_apps</td>
       </tr>
       <tr>
-        <td ><img src='images/icons/processor.png' class='optionicon'> <b>Processors</b></td><td class='text-right'>$stat_processors</td>
+        <td><i class='fa fa-microchip fa-lg icon-theme'  aria-hidden='true'></i> <b>Processors</b></td><td class='text-right'>$stat_processors</td>
-        <td><img src='images/icons/memory.png' class='optionicon'> <b>Memory</b></td><td class='text-right'>$stat_memory</td>
+        <td><i class='fa fa-braille fa-lg icon-theme'  aria-hidden='true'></i> <b>Memory</b></td><td class='text-right'>$stat_memory</td>
       </tr>
       <tr>
-        <td><img src='images/icons/storage.png' class='optionicon'> <b>Storage</b></td><td class='text-right'>$stat_storage</td>
+        <td><i class='fa fa-database fa-lg icon-theme'  aria-hidden='true'></i> <b>Storage</b></td><td class='text-right'>$stat_storage</td>
-        <td><img src='images/icons/diskio.png' class='optionicon'> <b>Disk I/O</b></td><td class='text-right'>$stat_diskio</td>
+        <td><i class='fa fa-hdd-o fa-lg icon-theme'  aria-hidden='true'></i> <b>Disk I/O</b></td><td class='text-right'>$stat_diskio</td>
       </tr>
       <tr>
-        <td><img src='images/icons/inventory.png' class='optionicon'> <b>HR-MIB</b></td><td class='text-right'>$stat_hrdev</td>
+        <td><i class='fa fa-cube fa-lg icon-theme'  aria-hidden='true'></i> <b>HR-MIB</b></td><td class='text-right'>$stat_hrdev</td>
-        <td><img src='images/icons/inventory.png' class='optionicon'> <b>Entity-MIB</b></td><td class='text-right'>$stat_entphys</td>
+        <td><i class='fa fa-cube fa-lg icon-theme'  aria-hidden='true'></i> <b>Entity-MIB</b></td><td class='text-right'>$stat_entphys</td>
       </tr>
       <tr>
-        <td ><img src='images/icons/syslog.png' class='optionicon'> <b>Syslog Entries</b></td><td class='text-right'>$stat_syslog</td>
+        <td><i class='fa fa-calendar-o fa-lg icon-theme'  aria-hidden='true'></i> <b>Syslog Entries</b></td><td class='text-right'>$stat_syslog</td>
-        <td><img src='images/icons/eventlog.png' class='optionicon'> <b>Eventlog Entries</b></td><td class='text-right'>$stat_events</td>
+        <td><i class='fa fa-calendar fa-lg icon-theme'  aria-hidden='true'></i> <b>Eventlog Entries</b></td><td class='text-right'>$stat_events</td>
       </tr>
       <tr>
-        <td ><img src='images/icons/sensors.png' class='optionicon'> <b>Sensors</b></td><td class='text-right'>$stat_sensors</td>
+        <td><i class='fa fa-dashboard fa-lg icon-theme'  aria-hidden='true'></i> <b>Sensors</b></td><td class='text-right'>$stat_sensors</td>
-        <td><img src='images/icons/toner.png' class='optionicon'> <b>Toner</b></td><td class='text-right'>$stat_toner</td>
+        <td><i class='fa fa-print fa-lg icon-theme'  aria-hidden='true'></i> <b>Toner</b></td><td class='text-right'>$stat_toner</td>
       </tr>
     </table>
 </div>

html/pages/alert-log.inc.php

@@ -92,7 +92,7 @@ foreach (get_all_devices() as $hostname) {
     max = high - low;
     search = $('.search-field').val();
 
-    $(".pdf-export").html("<a href='pdf.php?report=alert-log&device_id=<?php echo $_POST['device_id']; ?>&string="+search+"&results="+max+"&start="+low+"'><img src='images/16/pdf.png' width='16' height='16' alt='Export to pdf'> Export to pdf</a>");
+    $(".pdf-export").html("<a href='pdf.php?report=alert-log&device_id=<?php echo $_POST['device_id']; ?>&string="+search+"&results="+max+"&start="+low+"'><i class='fa fa-heartbeat fa-lg icon-theme' aria-hidden='true'></i> Export to pdf</a>");
 
     grid.find(".incident-toggle").each( function() {
       $(this).parent().addClass('incident-toggle-td');

html/pages/device.inc.php

@@ -46,14 +46,14 @@ if (device_permitted($vars['device']) || $check_device == $vars['device']) {
             echo '
                 <li class="'.$select['overview'].'">
                 <a href="'.generate_device_url($device, array('tab' => 'overview')).'">
-                <img src="images/16/server_lightning.png" align="absmiddle" border="0"> Overview
+		<i class="fa fa-lightbulb-o fa-lg icon-theme" aria-hidden="true"></i> Overview
                 </a>
                 </li>';
         }
 
         echo '<li class="'.$select['graphs'].'">
             <a href="'.generate_device_url($device, array('tab' => 'graphs')).'">
-            <img src="images/16/server_chart.png" align="absmiddle" border="0"> Graphs
+            <i class="fa fa-area-chart fa-lg icon-theme" aria-hidden="true"></i> Graphs
             </a>
             </li>';
 
@@ -66,7 +66,7 @@ if (device_permitted($vars['device']) || $check_device == $vars['device']) {
         if ($health) {
             echo '<li class="'.$select['health'].'">
                 <a href="'.generate_device_url($device, array('tab' => 'health')).'">
-                <img src="images/icons/sensors.png" align="absmiddle" border="0" /> Health
+                <i class="fa fa-heartbeat fa-lg icon-theme" aria-hidden="true"></i> Health
                 </a>
                 </li>';
         }
@@ -74,7 +74,7 @@ if (device_permitted($vars['device']) || $check_device == $vars['device']) {
         if (@dbFetchCell("SELECT COUNT(app_id) FROM applications WHERE device_id = '".$device['device_id']."'") > '0') {
             echo '<li class="'.$select['apps'].'">
                 <a href="'.generate_device_url($device, array('tab' => 'apps')).'">
-                <img src="images/icons/apps.png" align="absmiddle" border="0" /> Apps
+                <i class="fa fa-cubes fa-lg icon-theme" aria-hidden="true"></i> Apps
                 </a>
                 </li>';
         }
@@ -82,7 +82,7 @@ if (device_permitted($vars['device']) || $check_device == $vars['device']) {
         if (@dbFetchCell("SELECT 1 FROM processes WHERE device_id = '".$device['device_id']."'") > '0') {
             echo '<li class="'.$select['processes'].'">
                 <a href="'.generate_device_url($device, array('tab' => 'processes')).'">
-                <img src="images/16/application_osx_terminal.png" align="absmiddle" border="0" /> Processes
+                <i class="fa fa-microchip fa-lg icon-theme" aria-hidden="true"></i> Processes
                 </a>
                 </li>';
         }
@@ -90,7 +90,7 @@ if (device_permitted($vars['device']) || $check_device == $vars['device']) {
         if (isset($config['collectd_dir']) && is_dir($config['collectd_dir'].'/'.$device['hostname'].'/')) {
             echo '<li class="'.$select['collectd'].'">
                 <a href="'.generate_device_url($device, array('tab' => 'collectd')).'">
-                <img src="images/16/chart_line.png" align="absmiddle" border="0" /> CollectD
+                <i class="fa fa-pie-chart fa-lg icon-theme" aria-hidden="true"></i> CollectD
                 </a>
                 </li>';
         }
@@ -98,7 +98,7 @@ if (device_permitted($vars['device']) || $check_device == $vars['device']) {
         if (@dbFetchCell("SELECT COUNT(mplug_id) FROM munin_plugins WHERE device_id = '".$device['device_id']."'") > '0') {
             echo '<li class="'.$select['munin'].'">
                 <a href="'.generate_device_url($device, array('tab' => 'munin')).'">
-                <img src="images/16/chart_line.png" align="absmiddle" border="0" /> Munin
+                <i class="fa fa-pie-chart fa-lg icon-theme" aria-hidden="true"></i> Munin
                 </a>
                 </li>';
         }
@@ -106,7 +106,7 @@ if (device_permitted($vars['device']) || $check_device == $vars['device']) {
         if (@dbFetchCell("SELECT COUNT(port_id) FROM ports WHERE device_id = '".$device['device_id']."'") > '0') {
             echo '<li class="'.$select['ports'].$select['port'].'">
                 <a href="'.generate_device_url($device, array('tab' => 'ports')).'">
-                <img src="images/16/connect.png" align="absmiddle" border="0" /> Ports
+                <i class="fa fa-link fa-lg icon-theme" aria-hidden="true"></i> Ports
                 </a>
                 </li>';
         }
@@ -114,7 +114,7 @@ if (device_permitted($vars['device']) || $check_device == $vars['device']) {
         if (@dbFetchCell("SELECT COUNT(sla_id) FROM slas WHERE device_id = '".$device['device_id']."'") > '0') {
             echo '<li class="'.$select['slas'].$select['sla'].'">
                 <a href="'.generate_device_url($device, array('tab' => 'slas')).'">
-                <img src="images/16/chart_line.png" align="absmiddle" border="0" /> SLAs
+                <i class="fa fa-flag fa-lg icon-theme" aria-hidden="true"></i> SLAs
                 </a>
                 </li>';
         }
@@ -122,7 +122,7 @@ if (device_permitted($vars['device']) || $check_device == $vars['device']) {
         if (@dbFetchCell("SELECT COUNT(accesspoint_id) FROM access_points WHERE device_id = '".$device['device_id']."'") > '0') {
             echo '<li class="'.$select['accesspoints'].'">
                 <a href="'.generate_device_url($device, array('tab' => 'accesspoints')).'">
-                <img src="images/icons/wireless.png" align="absmiddle" border="0" /> Access Points
+                <i class="fa fa-wifi fa-lg icon-theme"  aria-hidden="true"></i> Access Points
                 </a>
                 </li>';
         }
@@ -132,7 +132,7 @@ if (device_permitted($vars['device']) || $check_device == $vars['device']) {
         if (count($smokeping_files['in'][$device['hostname']]) || count($smokeping_files['out'][$device['hostname']])) {
             echo '<li class="'.$select['latency'].'">
                 <a href="'.generate_device_url($device, array('tab' => 'latency')).'">
-                <img src="images/16/arrow_undo.png" align="absmiddle" border="0" /> Ping
+                <i class="fa fa-crosshairs fa-lg icon-theme"  aria-hidden="true"></i> Ping
                 </a>
                 </li>';
         }
@@ -140,7 +140,7 @@ if (device_permitted($vars['device']) || $check_device == $vars['device']) {
         if (@dbFetchCell("SELECT COUNT(vlan_id) FROM vlans WHERE device_id = '".$device['device_id']."'") > '0') {
             echo '<li class="'.$select['vlans'].'">
                 <a href="'.generate_device_url($device, array('tab' => 'vlans')).'">
-                <img src="images/16/vlans.png" align="absmiddle" border="0" /> VLANs
+                <i class="fa fa-tasks fa-lg icon-theme"  aria-hidden="true"></i> VLANs
                 </a>
                 </li>';
         }
@@ -148,7 +148,7 @@ if (device_permitted($vars['device']) || $check_device == $vars['device']) {
         if (@dbFetchCell("SELECT COUNT(id) FROM vminfo WHERE device_id = '".$device['device_id']."'") > '0') {
             echo '<li class="'.$select['vm'].'">
                 <a href="'.generate_device_url($device, array('tab' => 'vm')).'">
-                <img src="images/16/server_cog.png" align="absmiddle" border="0" /> Virtual Machines
+                <i class="fa fa-cog fa-lg icon-theme"  aria-hidden="true"></i> Virtual Machines
                 </a>
                 </li>';
         }
@@ -183,7 +183,7 @@ if (device_permitted($vars['device']) || $check_device == $vars['device']) {
         if (is_array($loadbalancer_tabs)) {
             echo '<li class="'.$select['loadbalancer'].'">
                 <a href="'.generate_device_url($device, array('tab' => 'loadbalancer')).'">
-                <img src="images/icons/loadbalancer.png" align="absmiddle" border="0" /> Load Balancer
+                <i class="fa fa-balance-scale fa-lg icon-theme"  aria-hidden="true"></i> Load Balancer
                 </a>
                 </li>';
         }
@@ -227,7 +227,7 @@ if (device_permitted($vars['device']) || $check_device == $vars['device']) {
         if (is_array($routing_tabs)) {
             echo '<li class="'.$select['routing'].'">
                 <a href="'.generate_device_url($device, array('tab' => 'routing')).'">
-                <img src="images/16/arrow_branch.png" align="absmiddle" border="0" /> Routing
+                <i class="fa fa-random fa-lg icon-theme"  aria-hidden="true"></i> Routing
                 </a>
                 </li>';
         }
@@ -236,21 +236,21 @@ if (device_permitted($vars['device']) || $check_device == $vars['device']) {
         if ($device_pw_count) {
             echo '<li class="'.$select['pseudowires'].'">
                 <a href="'.generate_device_url($device, array('tab' => 'pseudowires')).'">
-                <img src="images/16/arrow_switch.png" align="absmiddle" border="0" /> Pseudowires
+                <i class="fa fa-arrows-alt fa-lg icon-theme"  aria-hidden="true"></i> Pseudowires
                 </a>
                 </li>';
         }
 
         echo('<li class="' . $select['map'] . '">
                 <a href="'.generate_device_url($device, array('tab' => 'map')).'">
-                  <img src="images/16/chart_organisation.png" align="absmiddle" border="0" /> Map
+                  <i class="fa fa-sitemap fa-lg icon-theme"  aria-hidden="true"></i> Map
                 </a>
               </li>');
 
         if (@dbFetchCell("SELECT 1 FROM stp WHERE device_id = '".$device['device_id']."'")) {
             echo '<li class="'.$select['stp'].'">
                 <a href="'.generate_device_url($device, array('tab' => 'stp')).'">
-                <img src="images/16/chart_organisation.png" align="absmiddle" border="0" /> STP
+                <i class="fa fa-sitemap fa-lg icon-theme"  aria-hidden="true"></i> STP
                 </a>
                 </li>';
         }
@@ -258,7 +258,7 @@ if (device_permitted($vars['device']) || $check_device == $vars['device']) {
         if (@dbFetchCell("SELECT COUNT(*) FROM `packages` WHERE device_id = '".$device['device_id']."'") > '0') {
             echo '<li class="'.$select['packages'].'">
                 <a href="'.generate_device_url($device, array('tab' => 'packages')).'">
-                <img src="images/16/package.png" align="absmiddle" border="0" /> Pkgs
+                <i class="fa fa-folder fa-lg icon-theme"  aria-hidden="true"></i> Pkgs
                 </a>
                 </li>';
         }
@@ -266,13 +266,13 @@ if (device_permitted($vars['device']) || $check_device == $vars['device']) {
         if ($config['enable_inventory'] && @dbFetchCell("SELECT * FROM `entPhysical` WHERE device_id = '".$device['device_id']."'") > '0') {
             echo '<li class="'.$select['entphysical'].'">
                 <a href="'.generate_device_url($device, array('tab' => 'entphysical')).'">
-                <img src="images/16/bricks.png" align="absmiddle" border="0" /> Inventory
+                <i class="fa fa-cube fa-lg icon-theme"  aria-hidden="true"></i> Inventory
                 </a>
                 </li>';
         } elseif (device_permitted($device['device_id']) && $config['enable_inventory'] && @dbFetchCell("SELECT * FROM `hrDevice` WHERE device_id = '".$device['device_id']."'") > '0') {
             echo '<li class="'.$select['hrdevice'].'">
                 <a href="'.generate_device_url($device, array('tab' => 'hrdevice')).'">
-                <img src="images/16/bricks.png" align="absmiddle" border="0" /> Inventory
+                <i class="fa fa-cube fa-lg icon-theme"  aria-hidden="true"></i> Inventory
                 </a>
                 </li>';
         }
@@ -280,7 +280,7 @@ if (device_permitted($vars['device']) || $check_device == $vars['device']) {
         if (dbFetchCell("SELECT COUNT(service_id) FROM services WHERE device_id = '".$device['device_id']."'") > '0') {
             echo '<li class="'.$select['services'].'">
                 <a href="'.generate_device_url($device, array('tab' => 'services')).'">
-                <img src="images/icons/services.png" align="absmiddle" border="0" /> Services
+                <i class="fa fa-cogs fa-lg icon-theme"  aria-hidden="true"></i> Services
                 </a>
                 </li>';
         }
@@ -288,7 +288,7 @@ if (device_permitted($vars['device']) || $check_device == $vars['device']) {
         if (@dbFetchCell("SELECT COUNT(toner_id) FROM toner WHERE device_id = '".$device['device_id']."'") > '0') {
             echo '<li class="'.$select['toner'].'">
                 <a href="'.generate_device_url($device, array('tab' => 'toner')).'">
-                <img src="images/icons/toner.png" align="absmiddle" border="0" /> Toner
+                <i class="fa fa-print fa-lg icon-theme"  aria-hidden="true"></i> Toner
                 </a>
                 </li>';
         }
@@ -296,7 +296,7 @@ if (device_permitted($vars['device']) || $check_device == $vars['device']) {
         if (device_permitted($device['device_id'])) {
             echo '<li class="'.$select['logs'].'">
                 <a href="'.generate_device_url($device, array('tab' => 'logs')).'">
-                <img src="images/16/report_magnify.png" align="absmiddle" border="0" /> Logs
+                <i class="fa fa-sticky-note fa-lg icon-theme"  aria-hidden="true"></i> Logs
                 </a>
                 </li>';
         }
@@ -304,7 +304,7 @@ if (device_permitted($vars['device']) || $check_device == $vars['device']) {
         if (device_permitted($device['device_id'])) {
             echo '<li class="'.$select['alerts'].'">
                 <a href="'.generate_device_url($device, array('tab' => 'alerts')).'">
-                <img src="images/16/bell.png" align="absmiddle" border="0" /> Alerts
+                <i class="fa fa-exclamation-circle fa-lg icon-theme"  aria-hidden="true"></i> Alerts
                 </a>
                 </li>';
         }
@@ -312,7 +312,7 @@ if (device_permitted($vars['device']) || $check_device == $vars['device']) {
         if (device_permitted($device['device_id'])) {
             echo '<li class="'.$select['alert-stats'].'">
                 <a href="'.generate_device_url($device, array('tab' => 'alert-stats')).'">
-                <img src="images/16/chart_bar.png" align="absmiddle" border="0" /> Alert Stats
+                <i class="fa fa-bar-chart fa-lg icon-theme"  aria-hidden="true"></i> Alert Stats
                 </a>
                 </li>';
         }
@@ -349,7 +349,7 @@ if (device_permitted($vars['device']) || $check_device == $vars['device']) {
             if (dbFetchCell("SELECT COUNT(device_id) FROM devices_attribs WHERE device_id = ? AND attrib_type = 'override_Oxidized_disable' AND attrib_value='true'", array($device['device_id'])) == '0') {
                 echo '<li class="'.$select['showconfig'].'">
                     <a href="'.generate_device_url($device, array('tab' => 'showconfig')).'">
-                    <img src="images/16/page_white_text.png" align="absmiddle" border="0" /> Config
+                    <i class="fa fa-align-justify fa-lg icon-theme"  aria-hidden="true"></i> Config
                     </a>
                     </li>';
             }
@@ -381,7 +381,7 @@ if (device_permitted($vars['device']) || $check_device == $vars['device']) {
         if ($nfsen_rrd_file) {
             echo '<li class="'.$select['nfsen'].'">
                 <a href="'.generate_device_url($device, array('tab' => 'nfsen')).'">
-                <img src="images/16/rainbow.png" align="absmiddle" border="0" /> Netflow
+                <i class="fa fa-tint fa-lg icon-theme"  aria-hidden="true"></i> Netflow
                 </a>
                 </li>';
         }
@@ -389,43 +389,41 @@ if (device_permitted($vars['device']) || $check_device == $vars['device']) {
         if (can_ping_device($attribs) === true) {
             echo '<li class="'.$select['performance'].'">
                 <a href="'.generate_device_url($device, array('tab' => 'performance')).'">
-                <img src="images/16/chart_line.png" align="absmiddle" border="0" /> Performance
+                <i class="fa fa-line-chart fa-lg icon-theme"  aria-hidden="true"></i> Performance
                 </a>
                 </li>';
         }
 
         echo '<li class="'.$select['notes'].'">
             <a href="'.generate_device_url($device, array('tab' => 'notes')).'">
-            <img src="images/16/page_white_text.png" align="absmiddle" border="0" /> Notes
+            <i class="fa fa-file-text-o fa-lg icon-theme"  aria-hidden="true"></i> Notes
             </a>
             </li>';
 
         if (device_permitted($device['device_id']) && is_mib_poller_enabled($device)) {
             echo '<li class="'.$select['mib'].'">
                 <a href="'.generate_device_url($device, array('tab' => 'mib')).'">
-                <i class="fa fa-file-text-o"></i> MIB
+                <i class="fa fa-file-text-o fa-lg icon-theme"  aria-hidden="true"></i> MIB
                 </a>
                 </li>';
         }
 
 
         echo '<div class="dropdown pull-right">
-              <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"><i class="fa fa-cog"></i>
+              <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"><i class="fa fa-cog fa-lg icon-theme"  aria-hidden="true"></i>
               <span class="caret"></span></button>
               <ul class="dropdown-menu">
-                <li><a href="https://'.$device['hostname'].'" target="_blank" rel="noopener"><img src="images/16/http.png" alt="https" title="Launch browser to https://'.$device['hostname'].'" border="0" width="16" height="16" target="_blank" rel="noopener"> Web</a></li>
+                <li><a href="https://'.$device['hostname'].'" target="_blank" rel="noopener"><i class="fa fa-globe fa-lg icon-theme"  aria-hidden="true"></i> Web</a></li>
-                <li><a href="ssh://'.$device['hostname'].'" target="_blank" rel="noopener"><img src="images/16/ssh.png" alt="ssh" title="SSH to '.$device['hostname'].'" border="0" width="16" height="16"> SSH</a></li>
+                <li><a href="ssh://'.$device['hostname'].'" target="_blank" rel="noopener"><i class="fa fa-lock fa-lg icon-theme"  aria-hidden="true"></i> SSH</a></li>
-                 <li><a href="telnet://'.$device['hostname'].'" target="_blank" rel="noopener"><img src="images/16/telnet.png" alt="telnet" title="Telnet to '.$device['hostname'].'" border="0" width="16" height="16"> Telnet</a></li>';
+                 <li><a href="telnet://'.$device['hostname'].'" target="_blank" rel="noopener"><i class="fa fa-terminal fa-lg icon-theme"  aria-hidden="true"></i> Telnet</a></li>';
         if (is_admin()) {
             echo '<li>
                 <a href="'.generate_device_url($device, array('tab' => 'edit')).'">
-                <img src="images/16/wrench.png" align="absmiddle" border="0" />
+                <i class="fa fa-pencil fa-lg icon-theme"  aria-hidden="true"></i> Edit </a>
-                 Edit
-                </a>
                 </li>';
 
             echo '<li><a href="'.generate_device_url($device, array('tab' => 'capture')).'">
-                <img src="images/16/brick_error.png" align="absmiddle" border="0" /> Capture
+                <i class="fa fa-bug fa-lg icon-theme"  aria-hidden="true"></i> Capture
                 </a></li>';
         }
               echo '</ul>

html/pages/device/entphysical.inc.php

@@ -11,23 +11,23 @@ function printEntPhysical($ent, $level, $class)
  <li class='$class'>";
 
         if ($ent['entPhysicalClass'] == 'chassis') {
-            echo "<img src='images/16/server.png' style='vertical-align:middle'/> ";
+            echo '<i class="fa fa-server fa-lg icon-theme"  aria-hidden="true"></i> ';
         }
 
         if ($ent['entPhysicalClass'] == 'module') {
-            echo "<img src='images/16/drive.png' style='vertical-align:middle'/> ";
+            echo '<i class="fa fa-database fa-lg icon-theme"  aria-hidden="true"></i> ';
         }
 
         if ($ent['entPhysicalClass'] == 'port') {
-            echo "<img src='images/16/connect.png' style='vertical-align:middle'/> ";
+            echo '<i class="fa fa-link fa-lg icon-theme"  aria-hidden="true"></i> ';
         }
 
         if ($ent['entPhysicalClass'] == 'container') {
-            echo "<img src='images/16/box.png' style='vertical-align:middle'/> ";
+            echo '<i class="fa fa-square fa-lg icon-theme"  aria-hidden="true"></i> ';
         }
 
         if ($ent['entPhysicalClass'] == 'sensor') {
-            echo "<img src='images/16/contrast.png' style='vertical-align:middle'/> ";
+            echo '<i class="fa fa-heartbeat fa-lg icon-theme"  aria-hidden="true"></i> ';
             $sensor = dbFetchRow('SELECT * FROM `sensors` WHERE `device_id` = ? AND (`entPhysicalIndex` = ? OR `sensor_index` = ?)', array($device['device_id'], $ent['entPhysicalIndex'], $ent['entPhysicalIndex']));
             if (count($sensor)) {
                 $link = " href='device/device=".$device['device_id'].'/tab=health/metric='.$sensor['sensor_class']."/' onmouseover=\"return overlib('<img src=\'graph.php?id=".$sensor['sensor_id'].'&amp;type=sensor_'.$sensor['sensor_class'].'&amp;from=-2d&amp;to=now&amp;width=400&amp;height=150&amp;a='.$ent['entPhysical_id']."\'><img src=\'graph.php?id=".$sensor['sensor_id'].'&amp;type=sensor_'.$sensor['sensor_class'].'&amp;from=-2w&amp;to=now&amp;width=400&amp;height=150&amp;a='.$ent['entPhysical_id']."\'>', LEFT,FGCOLOR,'#e5e5e5', BGCOLOR, '#c0c0c0', BORDER, 5, CELLPAD, 4, CAPCOLOR, '#050505');\" onmouseout=\"return nd();\"";
@@ -37,7 +37,7 @@ function printEntPhysical($ent, $level, $class)
         }
 
         if ($ent['entPhysicalClass'] == 'backplane') {
-            echo "<img src='images/16/brick.png' style='vertical-align:middle'/> ";
+            echo '<i class="fa fa-bars fa-lg icon-theme"  aria-hidden="true"></i> ';
         }
 
         if ($ent['entPhysicalParentRelPos'] > '-1') {

html/pages/device/overview/c6kxbar.inc.php

@@ -6,7 +6,7 @@ echo '<div class="container-fluid">
         <div class="panel panel-default panel-condensed">
           <div class="panel-heading">';
 echo '<a href="device/device='.$device['device_id'].'/tab=health/metric=mempool/">';
-echo "<img src='images/16/arrow_switch.png'> <strong>Catalyst 6k Crossbar</strong></a>";
+echo '<i class="fa fa-arrows fa-lg icon-theme" aria-hidden="true"></i> <strong>Catalyst 6k Crossbar</strong></a>';
 echo '          </div>
     <table class="table table-hover table-condensed table-striped">';
 

html/pages/device/overview/cimc.inc.php

@@ -13,7 +13,7 @@ if (count($components) > 0) {
             <div class="col-md-12">
                 <div class="panel panel-default panel-condensed">
                     <div class="panel-heading">
-                        <img src='images/16/cog.png'><strong> Hardware Components</strong>
+                    <i class="fa fa-cogs fa-lg icon-theme" aria-hidden="true"></i> <strong>Hardware Components</strong>
                     </div>
                     <table class="table table-hover table-condensed table-striped">
     <?php

html/pages/device/overview/eventlog.inc.php

@@ -6,7 +6,7 @@ echo '  <div class="row">
             <div class="panel panel-default panel-condensed">
               <div class="panel-heading">';
 echo '<a href="device/device='.$device['device_id'].'/tab=logs/section=eventlog/">';
-echo "<img src='images/16/report.png'> <strong>Recent Events</strong></a>";
+echo '<i class="fa fa-calendar fa-lg icon-theme" aria-hidden="true"></i> <strong>Recent Events</strong></a>';
 echo '        </div>
               <table class="table table-hover table-condensed table-striped">';
 

html/pages/device/overview/generic/sensor.inc.php

@@ -6,12 +6,60 @@ if ($sensor_class == 'state') {
 }
 
 if (count($sensors)) {
+    switch (strtolower($sensor_type)) {
+        case "charge":
+            $sensor_fa_icon = "fa-battery-half";
+            break;
+        case "temperature":
+            $sensor_fa_icon = "fa-thermometer-three-quarters";
+            break;
+        case "humidity":
+            $sensor_fa_icon = "fa-tint";
+            break;
+        case "fanspeed":
+            $sensor_fa_icon = "fa-asterisk";
+            break;
+        case "voltage":
+            $sensor_fa_icon = "fa-bolt";
+            break;
+        case "current":
+            $sensor_fa_icon = "fa-bolt";
+            break;
+        case "frequency":
+            $sensor_fa_icon = "fa-line-chart";
+            break;
+        case "runtime":
+            $sensor_fa_icon = "fa-hourglass";
+            break;
+        case "power":
+            $sensor_fa_icon = "fa-power-off";
+            break;
+        case "dBm":
+            $sensor_fa_icon = "fa-signal";
+            break;
+        case "state":
+            $sensor_fa_icon = "fa-bullseye";
+            break;
+        case "load":
+            $sensor_fa_icon = "fa-percent";
+            break;
+        case "signal":
+            $sensor_fa_icon = "fa-signal";
+            break;
+        case "airflow":
+            $sensor_fa_icon = "fa-superpowers";
+            break;
+        default:
+            $sensor_fa_icon = "fa-delicious";
+            break;
+    }//end switch
+
     echo '<div class="container-fluid ">
         <div class="row">
         <div class="col-md-12">
         <div class="panel panel-default panel-condensed">
         <div class="panel-heading">';
-    echo '<a href="device/device='.$device['device_id'].'/tab=health/metric='.strtolower($sensor_type).'/"><img src="images/icons/'.strtolower($sensor_type).'.png"><strong> '.$sensor_type.'</strong></a>';
+    echo '<a href="device/device='.$device['device_id'].'/tab=health/metric='.strtolower($sensor_type).'/"><i class="fa '.$sensor_fa_icon.' fa-lg icon-theme" aria-hidden="true"></i><strong> '.$sensor_type.'</strong></a>';
     echo '      </div>
         <table class="table table-hover table-condensed table-striped">';
     foreach ($sensors as $sensor) {
@@ -51,8 +99,8 @@ if (count($sensors)) {
 
         $overlib_content = '<div style="width: 580px;"><h2>'.$device['hostname'].' - '.$sensor['sensor_descr'].'</h1>';
         foreach (array('day', 'week', 'month', 'year') as $period) {
-            $graph_array['from']  = $config['time'][$period];
+            $graph_array['from'] = $config['time'][$period];
-            $overlib_content .= str_replace('"', "\'", generate_graph_tag($graph_array));
+            $overlib_content    .= str_replace('"', "\'", generate_graph_tag($graph_array));
         }
 
         $overlib_content .= '</div>';
@@ -62,25 +110,30 @@ if (count($sensors)) {
         $graph_array['bg']     = 'ffffff00';
         // the 00 at the end makes the area transparent.
         $graph_array['from'] = $config['time']['day'];
-        $sensor_minigraph =  generate_lazy_graph_tag($graph_array);
+        $sensor_minigraph    = generate_lazy_graph_tag($graph_array);
 
         if (!empty($state_translation['0']['state_descr'])) {
-            $state_style="";
+            $state_style = "";
             switch ($state_translation['0']['state_generic_value']) {
-                case 0: // OK
+                case 0:
-                    $state_style="class='label label-success'";
+                // OK
+                    $state_style = "class='label label-success'";
                     break;
-                case 1: // Warning
+                case 1:
-                    $state_style="class='label label-warning'";
+                // Warning
+                    $state_style = "class='label label-warning'";
                     break;
-                case 2: // Critical
+                case 2:
-                    $state_style="class='label label-danger'";
+                // Critical
+                    $state_style = "class='label label-danger'";
                     break;
-                case 3: // Unknown
+                case 3:
+                // Unknown
                 default:
-                    $state_style="class='label label-default'";
+                    $state_style = "class='label label-default'";
                     break;
             }
+
             echo '<tr>
                 <td class="col-md-4">'.overlib_link($link, shorten_interface_type($sensor['sensor_descr']), $overlib_content, $sensor_class).'</td>
                 <td class="col-md-4">'.overlib_link($link, $sensor_minigraph, $overlib_content, $sensor_class).'</td>
@@ -92,7 +145,7 @@ if (count($sensors)) {
                 <td class="col-md-4">'.overlib_link($link, $sensor_minigraph, $overlib_content, $sensor_class).'</td>
                 <td class="col-md-4">'.overlib_link($link, '<span '.($sensor['sensor_current'] < $sensor['sensor_limit_low'] || $sensor['sensor_current'] > $sensor['sensor_limit'] ? "style='color: red'" : '').'>'.$sensor['sensor_current'].$sensor_unit.'</span>', $overlib_content, $sensor_class).'</td>
                 </tr>';
-        }
+        }//end if
     }//end foreach
 
     echo '</table>';

html/pages/device/overview/mempools.inc.php

@@ -12,7 +12,7 @@ if (count($mempools)) {
         <div class="panel-heading">
         ';
     echo '<a href="device/device='.$device['device_id'].'/tab=health/metric=mempool/">';
-    echo "<img src='images/icons/memory.png'> <strong>Memory Pools</strong></a>";
+    echo '<i class="fa fa-braille fa-lg icon-theme" aria-hidden="true"></i> <strong>Memory Pools</strong></a>';
     echo '
         </div>
         <table class="table table-hover table-condensed table-striped">

html/pages/device/overview/ports.inc.php

@@ -6,7 +6,7 @@ if ($ports['total']) {
           <div class="col-md-12">
             <div class="panel panel-default panel-condensed">
               <div class="panel-heading">
-              <strong>Overall Traffic</strong>
+              <i class="fa fa-road fa-lg icon-theme" aria-hidden="true"></i><strong> Overall Traffic</strong>
             </div>
             <table class="table table-hover table-condensed table-striped">';
 
@@ -48,10 +48,10 @@ if ($ports['total']) {
 
     echo '
     <tr>
-      <td><img src="images/16/connect.png" align="absmiddle"> '.$ports['total'].'</td>
+      <td><i class="fa fa-link fa-lg" style="color:black" aria-hidden="true"></i> '.$ports['total'].'</td>
-      <td><img src="images/16/if-connect.png" align="absmiddle"> '.$ports['up'].'</td>
+      <td><i class="fa fa-link fa-lg" style="color:green" aria-hidden="true"></i> '.$ports['up'].'</td>
-      <td><img src="images/16/if-disconnect.png" align="absmiddle"> '.$ports['down'].'</td>
+      <td><i class="fa fa-link fa-lg" style="color:red" aria-hidden="true"></i> '.$ports['down'].'</td>
-      <td><img src="images/16/if-disable.png" align="absmiddle"> '.$ports['disabled'].'</td>
+      <td><i class="fa fa-link fa-lg" style="color:grey" aria-hidden="true"></i> '.$ports['disabled'].'</td>
     </tr>';
 
     echo '<tr>

html/pages/device/overview/processors.inc.php

@@ -10,7 +10,7 @@ if (count($processors)) {
             <div class="panel-heading">
 ';
     echo '<a href="device/device='.$device['device_id'].'/tab=health/metric=processor/">';
-    echo "<img src='images/icons/processor.png'> <strong>Processors</strong></a>";
+    echo '<i class="fa fa-microchip fa-lg icon-theme" aria-hidden="true"></i> <strong>Processors</strong></a>';
     echo '</div>
         <table class="table table-hover table-condensed table-striped">';
 

html/pages/device/overview/services.inc.php

@@ -24,14 +24,14 @@ if ($services['total']) {
         <div class="row col-md-12">
             <div class="panel panel-default panel-condensed">
                 <div class="panel-heading">
-                    <img src='images/16/cog.png'><strong> Services</strong>
+                <i class="fa fa-cogs fa-lg icon-theme" aria-hidden="true"></i> <strong>Services</strong>
                 </div>
                 <table class="table table-hover table-condensed table-striped">
                     <tr>
-                        <td title="Total"><img src='images/16/cog.png'> <?php echo $services['total']?></td>
+                        <td title="Total"><i class="fa fa-cog" style="color:#0080FF" aria-hidden="true"></i> <?php echo $services['total']?></td>
-                        <td title="Status - Ok"><img src='images/16/cog_add.png'> <?php echo $services[0]?></td>
+                        <td title="Status - Ok"><i class="fa fa-cog" style="color:green" aria-hidden="true"></i> <?php echo $services[0]?></td>
-                        <td title="Status - Warning"><img src='images/16/cog_error.png'> <?php echo $services[1]?></td>
+                        <td title="Status - Warning"><i class="fa fa-cog" style="color:orange" aria-hidden="true"></i> <?php echo $services[1]?></td>
-                        <td title="Status - Critical"><img src='images/16/cog_delete.png'> <?php echo $services[2]?></td>
+                        <td title="Status - Critical"><i class="fa fa-cog" style="color:red" aria-hidden="true"></i> <?php echo $services[2]?></td>
                     </tr>
                     <tr>
                         <td colspan='4'><?php echo $string?></td>

html/pages/device/overview/storage.inc.php

@@ -11,7 +11,7 @@ if (count($drives)) {
               <div class="panel panel-default panel-condensed">
                 <div class="panel-heading">';
     echo '<a href="device/device='.$device['device_id'].'/tab=health/metric=storage/">';
-    echo "<img src='images/icons/storage.png'> <strong>Storage</strong></a>";
+    echo '<i class="fa fa-database fa-lg icon-theme" aria-hidden="true"></i> <strong>Storage</strong></a>';
     echo '    </div>
             <table class="table table-hover table-condensed table-striped">';
 

html/pages/device/overview/syslog.inc.php

@@ -8,7 +8,7 @@ if ($config['enable_syslog']) {
           <div class="col-md-12">
             <div class="panel panel-default panel-condensed">
               <div class="panel-heading">';
-        echo '<a href="device/device='.$device['device_id'].'/tab=logs/section=syslog/"><img src="images/16/printer.png" /> <strong>Recent Syslog</strong></a>';
+        echo '<a href="device/device='.$device['device_id'].'/tab=logs/section=syslog/"><i class="fa fa-calendar-o fa-lg icon-theme" aria-hidden="true"></i> <strong>Recent Syslog</strong></a>';
         echo '        </div>
               <table class="table table-hover table-condensed table-striped">';
         foreach ($syslog as $entry) {

html/pages/device/overview/toner.inc.php

@@ -11,7 +11,7 @@ if (count($toners)) {
             <div class="panel panel-default panel-condensed">
               <div class="panel-heading">';
     echo '<a href="device/device='.$device['device_id'].'/tab=toner/">';
-    echo "<img src='images/icons/toner.png'> <strong>Toner</strong></a>";
+    echo '<i class="fa fa-print fa-lg icon-theme" aria-hidden="true"></i> <strong>Toner</strong></a>';
     echo '</div>
         <table class="table table-hover table-condensed table-striped">';
 

html/pages/device/port.inc.php

@@ -227,7 +227,7 @@ if (dbFetchCell("SELECT COUNT(*) FROM juniAtmVp WHERE port_id = '".$port['port_i
 }//end if
 
 if ($_SESSION['userlevel'] >= '10' && $config['enable_billing'] == 1) {
-    echo "<span style='float: right;'><a href='" . generate_url(array('page'=>'bills', 'view'=>'add', 'port'=>$port['port_id'])) . "'><img src='images/16/money.png' border='0' align='absmiddle'> Create Bill</a></span>";
+    echo "<span style='float: right;'><a href='" . generate_url(array('page'=>'bills', 'view'=>'add', 'port'=>$port['port_id'])) . "'><i class='fa fa-money fa-lg icon-theme' aria-hidden='true'></i> border='0' align='absmiddle'> Create Bill</a></span>";
 }
 
 print_optionbar_end();

html/pages/device/port/pagp.inc.php

@@ -29,6 +29,6 @@ echo "<a href='#' onmouseover=\"return overlib('<img src=\'$yearly_url\'>', LEFT
       <img src='$yearly_traffic' border=0></a>";
 
 foreach (dbFetchRows('SELECT * FROM `ports` WHERE `pagpGroupIfIndex` = ? and `device_id` = ?', array($port['ifIndex'], $device['device_id'])) as $member) {
-    echo "$br<img src='images/16/brick_link.png' align=absmiddle> <strong>".generate_port_link($member).' (PAgP)</strong>';
+    echo "$br<i class='fa fa-anchor fa-lg icon-theme' aria-hidden='true'></i> <strong>".generate_port_link($member).' (PAgP)</strong>';
     $br = '<br />';
 }

html/pages/device/pseudowires.inc.php

@@ -71,7 +71,7 @@ foreach (dbFetchRows('SELECT * FROM pseudowires AS P, ports AS I WHERE P.port_id
         }
 
         echo "<tr style=\"background-color: #$bg;\"><td rowspan=2 style='font-size:18px; padding:4px;'>".$pw_a['cpwVcID'].'</td><td>'.generate_port_link($pw_a)."</td>
-            <td rowspan=2> <img src='images/16/arrow_right.png'> </td>
+            <td rowspan=2> <i class='fa fa-arrows-alt fa-lg icon-theme' aria-hidden='true'></i> </td>
             <td>".generate_device_link($pw_b).'</td><td>'.generate_port_link($pw_b).'</td></tr>';
         echo "<tr style=\"background-color: #$bg;\"><td colspan=2>".display($pw_a['ifAlias']).'</td><td>'.display($pw_b['ifAlias']).'</td></tr>';
 

html/pages/device/routing/bgp.inc.php

@@ -220,8 +220,8 @@ foreach (dbFetchRows("SELECT * FROM `bgpPeers` WHERE `device_id` = ? $extra_sql
         <td><strong>AS'.$peer['bgpPeerRemoteAs'].'</strong><br />'.$peer['astext']."</td>
         <td><strong><span style='color: $admin_col;'>".$peer['bgpPeerAdminStatus']."<span><br /><span style='color: $col;'>".$peer['bgpPeerState'].'</span></strong></td>
         <td>'.formatUptime($peer['bgpPeerFsmEstablishedTime'])."<br />
-        Updates <img src='images/16/arrow_down.png' align=absmiddle> ".$peer['bgpPeerInUpdates']."
+        Updates <i class='fa fa-arrow-down fa-lg icon-theme' aria-hidden='true'></i> ".$peer['bgpPeerInUpdates']."
-        <img src='images/16/arrow_up.png' align=absmiddle> ".$peer['bgpPeerOutUpdates'].'</td>
+        <i class='fa fa-arrow-up fa-lg icon-theme' aria-hidden='true'></i> ".$peer['bgpPeerOutUpdates'].'</td>
         </tr>
         <tr height=5></tr>';
 

html/pages/device/services.inc.php

@@ -39,7 +39,7 @@ foreach ($menu_options as $option => $text) {
     $sep = ' | ';
 }
 unset($sep);
-echo '<div class="pull-right"><a data-toggle="modal" href="#create-service"><img src="images/16/add.png" border="0" align="absmiddle"> Add Service</a></div>';
+echo '<div class="pull-right"><a data-toggle="modal" href="#create-service"><i class="fa fa-cog" style="color:green" aria-hidden="true"></i> Add Service</a></div>';
 print_optionbar_end();
 ?>
     <div class="row col-sm-12"><span id="message"></span></div>

html/pages/graphs.inc.php

@@ -165,7 +165,7 @@ foreach (get_graph_subtypes($type, $device) as $avail_type) {
         print_optionbar_start();
         echo('<div style="float: left; width: 30px;">
             <div style="margin: auto auto;">
-            <img valign=absmiddle src="images/16/information.png" />
+            <i class="fa fa-info-circle fa-lg icon-theme" aria-hidden="true"></i>
             </div>
             </div>');
         echo($config['graph_descr'][$vars['type']]);

html/pages/iftype.inc.php

@@ -67,7 +67,7 @@ if ($if_list) {
             <td colspan='5'";
 
         if (dbFetchCell('SELECT count(*) FROM mac_accounting WHERE port_id = ?', array($port['port_id']))) {
-            echo "<span style='float: right;'><a href='" . generate_url(array('page'=>'device', 'device'=>$port['device_id'], 'tab'=>'port', 'port'=>$port['port_id'], 'view'=>'macaccounting')) . "'><img src='images/16/chart_curve.png' align='absmiddle'> MAC Accounting</a></span>";
+            echo "<span style='float: right;'><a href='" . generate_url(array('page'=>'device', 'device'=>$port['device_id'], 'tab'=>'port', 'port'=>$port['port_id'], 'view'=>'macaccounting')) . "'><i class='fa fa-pie-chart fa-lg icon-theme' aria-hidden='true'></i> MAC Accounting</a></span>";
         }
 
         echo '<br />';

html/pages/locations.inc.php

@@ -52,7 +52,7 @@ foreach (getlocations() as $location) {
     }
 
     if ($hostalerts) {
-        $alert = '<img src="images/16/flag_red.png" alt="alert" />';
+        $alert = '<i class="fa fa-flag" style="color:red" aria-hidden="true"></i>';
     } else {
         $alert = '';
     }

html/pages/pseudowires.inc.php

@@ -74,7 +74,7 @@ foreach (dbFetchRows('SELECT * FROM pseudowires AS P, ports AS I, devices AS D W
         }
 
         echo "<tr style=\"background-color: #$bg;\"><td rowspan=2 style='font-size:18px; padding:4px;'>".$pw_a['cpwVcID'].'</td><td>'.generate_device_link($pw_a).'</td><td>'.generate_port_link($pw_a)."</td>
-                                                                                          <td rowspan=2> <img src='images/16/arrow_right.png'> </td>
+                                                                                          <td rowspan=2> <i class='fa fa-arrows-alt fa-lg icon-theme' aria-hidden='true'></i> </td>
                                                                                           <td>".generate_device_link($pw_b).'</td><td>'.generate_port_link($pw_b).'</td></tr>';
         echo "<tr style=\"background-color: #$bg;\"><td colspan=2>".display($pw_a['ifAlias']).'</td><td colspan=2>'.display($pw_b['ifAlias']).'</td></tr>';
 

includes/common.php

@@ -19,19 +19,19 @@
 function generate_priority_icon($priority)
 {
     $map = array(
-        "emerg"     => "server_delete",
+        "emerg"     => "fa-plus-circle text-danger",
-        "alert"     => "cancel",
+        "alert"     => "fa-ban text-danger",
-        "crit"      => "application_lightning",
+        "crit"      => "fa-minus-circle text-danger",
-        "err"       => "application_delete",
+        "err"       => "fa-times-circle text-warning",
-        "warning"   => "application_error",
+        "warning"   => "fa-exclamation-triangle text-warning",
-        "notice"    => "application_edit",
+        "notice"    => "fa-info-circle text-info",
-        "info"      => "application",
+        "info"      => "fa-info-circle text-info",
-        "debug"     => "bug",
+        "debug"     => "fa-bug text-muted",
-        ""          => "application",
+        ""          => "fa-info-circle text-info",
     );
 
-    $image = isset($map[$priority]) ? $map[$priority] : 'application';
+    $fa_icon = isset($map[$priority]) ? $map[$priority] : 'fa-info-circle text-info';
-    return '<img src="images/16/' . $image .'.png" title="' . $priority . '">';
+    return '<i class="fa '. $fa_icon.' fa-lg" title="'.$priority.'" aria-hidden="true"></i>';
 }
 
 function generate_priority_status($priority)
@@ -1580,12 +1580,10 @@ function fahrenheit_to_celsius($scale, $value)
     }
     return sprintf('%.02f', $value);
 }
-
 function uw_to_dbm($value)
 {
     return 10 * log10($value / 1000);
 }
-
 /**
  * @param $value
  * @param null $default
@@ -1599,7 +1597,6 @@ function set_null($value, $default = null, $min = 0)
     }
     return $value;
 }
-
 /*
  * @param $value
  * @param int $default
@@ -1612,7 +1609,6 @@ function set_numeric($value, $default = 0)
     }
     return $value;
 }
-
 function check_git_exists()
 {
     if (`which git`) {