From 2ec3132c64adc9cf6d0c310ae249eab1b7e9c135 Mon Sep 17 00:00:00 2001
From: Bennett Blodinger <bennett.blodinger@gmail.com>
Date: Thu, 22 Sep 2016 08:09:31 -0400
Subject: [PATCH 1/7] close icon element

---
 includes/common.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/includes/common.php b/includes/common.php
index b14b317817..73cf1d4f0a 100644
--- a/includes/common.php
+++ b/includes/common.php
@@ -135,7 +135,7 @@ function print_message($text)
     if (isCli()) {
         c_echo("%g".$text."%n\n");
     } else {
-        echo('<div class="alert alert-success"><i class="fa fa-fw fa-check-circle" aria-hidden="true"> '.$text.'</div>');
+        echo('<div class="alert alert-success"><i class="fa fa-fw fa-check-circle" aria-hidden="true"></i> '.$text.'</div>');
     }
 }
 

From 07574b27d8dc7dbe91857753bb94f7a714cf046c Mon Sep 17 00:00:00 2001
From: Bennett Blodinger <bennett.blodinger@gmail.com>
Date: Thu, 22 Sep 2016 10:44:17 -0400
Subject: [PATCH 2/7] Move to Font Awesome

Keeps the look more in line with the navigation bar icons.
In the future with Bootstrap 4, Glyphicons will not be included, so this
starts the transistions away.
---
 html/includes/common/alerts.inc.php         |   8 +-
 html/includes/functions.inc.php             |   6 +-
 html/includes/print-alert-rules.php         |  21 +--
 html/includes/print-alert-templates.php     |   8 +-
 html/includes/print-alerts.inc.php          |  32 ++--
 html/includes/print-interface.inc.php       |   2 +-
 html/includes/table/alertlog.inc.php        |  34 ++--
 html/includes/table/alerts.inc.php          |   6 +-
 html/includes/table/edit-ports.inc.php      |   4 +-
 html/js/librenms.js                         |   6 +-
 html/pages/alert-log.inc.php                |   6 +-
 html/pages/alert-map.inc.php                |   4 +-
 html/pages/device-groups.inc.php            |   4 +-
 html/pages/device/edit/health.inc.php       |  16 +-
 html/pages/device/edit/ports.inc.php        |  24 +--
 html/pages/device/processes.inc.php         |   2 +-
 html/pages/device/routing/cisco-otv.inc.php |   4 +-
 html/pages/device/services.inc.php          |   4 +-
 html/pages/health/mempool.inc.php           |   2 +-
 html/pages/health/processor.inc.php         |   2 +-
 html/pages/health/storage.inc.php           |   2 +-
 html/pages/routing/cisco-otv.inc.php        |   2 +-
 html/pages/services.inc.php                 |   4 +-
 html/pages/settings/alerting.inc.php        | 164 ++++++++++++++------
 24 files changed, 222 insertions(+), 145 deletions(-)

diff --git a/html/includes/common/alerts.inc.php b/html/includes/common/alerts.inc.php
index 5d0a84decf..23f9263100 100644
--- a/html/includes/common/alerts.inc.php
+++ b/html/includes/common/alerts.inc.php
@@ -227,7 +227,7 @@ var alerts_grid = $("#alerts_'.$unique_id.'").bootgrid({
             return "<h4><span class=\'label label-"+row.extra+" threeqtr-width\'>" + row.msg + "</span></h4>";
         },
         "ack": function(column,row) {
-            return "<button type=\'button\' class=\'btn btn-"+row.ack_col+" btn-sm command-ack-alert\' data-target=\'#ack-alert\' data-state=\'"+row.state+"\' data-alert_id=\'"+row.alert_id+"\' name=\'ack-alert\' id=\'ack-alert\' data-extra=\'"+row.extra+"\'><span class=\'glyphicon glyphicon-"+row.ack_ico+"\'aria-hidden=\'true\'></span></button>";
+            return "<button type=\'button\' class=\'btn btn-"+row.ack_col+" btn-sm command-ack-alert\' data-target=\'#ack-alert\' data-state=\'"+row.state+"\' data-alert_id=\'"+row.alert_id+"\' name=\'ack-alert\' id=\'ack-alert\' data-extra=\'"+row.extra+"\'><i class=\'fa fa-"+row.ack_ico+"\'aria-hidden=\'true\'></i></button>";
         },
         "proc": function(column,row) {
             return "<button type=\'button\' class=\'btn command-open-proc\' data-alert_id=\'"+row.alert_id+"\' name=\'open-proc\' id=\'open-proc\'>Open</button>";
@@ -248,7 +248,7 @@ var alerts_grid = $("#alerts_'.$unique_id.'").bootgrid({
     }).on("click", function(e) {
       var target = $(this).data("target");
       $(target).collapse(\'toggle\');
-      $(this).toggleClass(\'glyphicon-plus glyphicon-minus\');
+      $(this).toggleClass(\'fa-plus fa-minus\');
     });
     alerts_grid.find(".incident").each( function() {
       $(this).parent().addClass(\'col-lg-4 col-md-4 col-sm-4 col-xs-4\');
@@ -258,8 +258,8 @@ var alerts_grid = $("#alerts_'.$unique_id.'").bootgrid({
         $(this).find(".incident-toggle").fadeOut(200);
       }).on("click", "td:not(.incident-toggle-td)", function() {
         var target = $(this).parent().find(".incident-toggle").data("target");
-        if( $(this).parent().find(".incident-toggle").hasClass(\'glyphicon-plus\') ) {
-          $(this).parent().find(".incident-toggle").toggleClass(\'glyphicon-plus glyphicon-minus\');
+        if( $(this).parent().find(".incident-toggle").hasClass(\'fa-plus\') ) {
+          $(this).parent().find(".incident-toggle").toggleClass(\'fa-plus fa-minus\');
           $(target).collapse(\'toggle\');
         }
       });
diff --git a/html/includes/functions.inc.php b/html/includes/functions.inc.php
index 628e335b29..2a988d6c47 100644
--- a/html/includes/functions.inc.php
+++ b/html/includes/functions.inc.php
@@ -1209,7 +1209,7 @@ function generate_dynamic_config_panel($title, $config_groups, $items = array(),
             $output .= '
             <div class="form-group has-feedback">
                 <label for="'.$item['name'].'"" class="col-sm-4 control-label">'.$item['descr'].' </label>
-                <div data-toggle="tooltip" title="'.$config_groups[$item['name']]['config_descr'].'" class="toolTip glyphicon glyphicon-question-sign"></div>
+                <div data-toggle="tooltip" title="'.$config_groups[$item['name']]['config_descr'].'" class="toolTip fa fa-fw fa-lg fa-question-circle"></div>
                 <div class="col-sm-4">
             ';
             if ($item['type'] == 'checkbox') {
@@ -1217,7 +1217,7 @@ function generate_dynamic_config_panel($title, $config_groups, $items = array(),
             } elseif ($item['type'] == 'text') {
                 $output .= '
                 <input id="'.$item['name'].'" class="form-control" type="text" name="global-config-input" value="'.$config_groups[$item['name']]['config_value'].'" data-config_id="'.$config_groups[$item['name']]['config_id'].'">
-                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                <span class="form-control-feedback"><i class="fa" aria-hidden="true"></i></span>
                 ';
             } elseif ($item['type'] == 'select') {
                 $output .= '
@@ -1242,7 +1242,7 @@ function generate_dynamic_config_panel($title, $config_groups, $items = array(),
                 }
                 $output .='
                 </select>
-                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                <span class="form-control-feedback"><i class="fa" aria-hidden="true"></i></span>
                 ';
             }
             $output .= '
diff --git a/html/includes/print-alert-rules.php b/html/includes/print-alert-rules.php
index 2c240479f6..8b3ee73eb7 100644
--- a/html/includes/print-alert-rules.php
+++ b/html/includes/print-alert-rules.php
@@ -162,13 +162,13 @@ $full_query = $full_query.$query." LIMIT $start,$results";
 
 foreach (dbFetchRows($full_query, $param) as $rule) {
     $sub   = dbFetchRows('SELECT * FROM alerts WHERE rule_id = ? ORDER BY `state` DESC, `id` DESC LIMIT 1', array($rule['id']));
-    $ico   = 'ok';
+    $ico   = 'check';
     $col   = 'success';
     $extra = '';
     if (sizeof($sub) == 1) {
         $sub = $sub[0];
         if ((int) $sub['state'] === 0) {
-            $ico = 'ok';
+            $ico = 'check';
             $col = 'success';
         } elseif ((int) $sub['state'] === 1 || (int) $sub['state'] === 2) {
             $ico   = 'remove';
@@ -205,9 +205,9 @@ foreach (dbFetchRows($full_query, $param) as $rule) {
 
     echo '<i>'.htmlentities($rule['rule']).'</i></td>';
     echo '<td>'.$rule['severity'].'</td>';
-    echo "<td><span id='alert-rule-".$rule['id']."' class='glyphicon glyphicon-".$ico.' glyphicon-large text-'.$col."'></span> ";
+    echo "<td><span id='alert-rule-".$rule['id']."' class='fa fa-fw fa-3x fa-".$ico.' text-'.$col."'></span> ";
     if ($rule_extra['mute'] === true) {
-        echo "<span class='glyphicon glyphicon-volume-off glyphicon-large text-primary' aria-hidden='true'></span></td>";
+        echo "<i class='fa fa-fw fa-3x fa-volume-off text-primary' aria-hidden='true'></i></td>";
     }
 
     echo '<td><small>Max: '.$rule_extra['count'].'<br />Delay: '.$rule_extra['delay'].'<br />Interval: '.$rule_extra['interval'].'</small></td>';
@@ -219,8 +219,9 @@ foreach (dbFetchRows($full_query, $param) as $rule) {
     echo '</td>';
     echo '<td>';
     if ($_SESSION['userlevel'] >= '10') {
-        echo "<button type='button' class='btn btn-primary btn-sm' data-toggle='modal' data-target='#create-alert' data-device_id='".$rule['device_id']."' data-alert_id='".$rule['id']."' name='edit-alert-rule' data-content='".$popover_msg."'><span class='glyphicon glyphicon-pencil' aria-hidden='true'></span></button> ";
-        echo "<button type='button' class='btn btn-danger btn-sm' aria-label='Delete' data-toggle='modal' data-target='#confirm-delete' data-alert_id='".$rule['id']."' name='delete-alert-rule' data-content='".$popover_msg."'><span class='glyphicon glyphicon-trash' aria-hidden='true'></span></button>";
+        echo "<div class='btn-group btn-group-sm' role='group'>";
+        echo "<button type='button' class='btn btn-primary' data-toggle='modal' data-target='#create-alert' data-device_id='".$rule['device_id']."' data-alert_id='".$rule['id']."' name='edit-alert-rule' data-content='".$popover_msg."'><i class='fa fa-lg fa-pencil' aria-hidden='true'></i></button> ";
+        echo "<button type='button' class='btn btn-danger' aria-label='Delete' data-toggle='modal' data-target='#confirm-delete' data-alert_id='".$rule['id']."' name='delete-alert-rule' data-content='".$popover_msg."'><i class='fa fa-lg fa-trash' aria-hidden='true'></i></button>";
     }
 
     echo '</td>';
@@ -297,15 +298,15 @@ $('input[name="alert-rule"]').on('switchChange.bootstrapSwitch',  function(event
             success: function(msg) {
                 if(msg.indexOf("ERROR:") <= -1) {
                     if(state) {
-                        $('#alert-rule-'+alert_id).removeClass('glyphicon-pause');
-                        $('#alert-rule-'+alert_id).addClass('glyphicon-'+orig_state);
+                        $('#alert-rule-'+alert_id).removeClass('fa-pause');
+                        $('#alert-rule-'+alert_id).addClass('fa-'+orig_state);
                         $('#alert-rule-'+alert_id).removeClass('text-default');
                         $('#alert-rule-'+alert_id).addClass('text-'+orig_colour);
                         $('#row_'+alert_id).removeClass('active');
                         $('#row_'+alert_id).addClass(orig_class);
                     } else {
-                        $('#alert-rule-'+alert_id).removeClass('glyphicon-'+orig_state);
-                        $('#alert-rule-'+alert_id).addClass('glyphicon-pause');
+                        $('#alert-rule-'+alert_id).removeClass('fa-'+orig_state);
+                        $('#alert-rule-'+alert_id).addClass('fa-pause');
                         $('#alert-rule-'+alert_id).removeClass('text-'+orig_colour);
                         $('#alert-rule-'+alert_id).addClass('text-default');
                         $('#row_'+alert_id).removeClass('warning');
diff --git a/html/includes/print-alert-templates.php b/html/includes/print-alert-templates.php
index 0af128a766..0541291e5b 100644
--- a/html/includes/print-alert-templates.php
+++ b/html/includes/print-alert-templates.php
@@ -79,9 +79,11 @@ foreach (dbFetchRows($full_query, $param) as $template) {
             <td>'.$template['name'].'</td>
             <td>';
     if ($_SESSION['userlevel'] >= '10') {
-        echo "<button type='button' class='btn btn-primary btn-sm' data-toggle='modal' data-target='#alert-template' data-template_id='".$template['id']."' data-template_action='edit' name='edit-alert-template'><span class='glyphicon glyphicon-pencil' aria-hidden='true'></span></button> ";
-        echo "<button type='button' class='btn btn-danger btn-sm' data-toggle='modal' data-target='#confirm-delete-alert-template' data-template_id='".$template['id']."' name='delete-alert-template'><span class='glyphicon glyphicon-trash' aria-hidden='true'></span></button> ";
-        echo "<button type='button' class='btn btn-warning btn-sm' data-toggle='modal' data-target='#attach-alert-template' data-template_id='".$template['id']."' name='attach-alert-template'><span class='glyphicon glyphicon-th-list' aria-hidden='true'></span></button>";
+        echo "<div class='btn-group btn-group-sm' role='group'>";
+        echo "<button type='button' class='btn btn-primary btn-sm' data-toggle='modal' data-target='#alert-template' data-template_id='".$template['id']."' data-template_action='edit' name='edit-alert-template'><i class='fa fa-lg fa-pencil' aria-hidden='true'></i></button> ";
+        echo "<button type='button' class='btn btn-danger btn-sm' data-toggle='modal' data-target='#confirm-delete-alert-template' data-template_id='".$template['id']."' name='delete-alert-template'><i class='fa fa-lg fa-trash' aria-hidden='true'></i></button> ";
+        echo "<button type='button' class='btn btn-warning btn-sm' data-toggle='modal' data-target='#attach-alert-template' data-template_id='".$template['id']."' name='attach-alert-template'><i class='fa fa-th-list' aria-hidden='true'></span></button>";
+        echo "</div>";
     }
 
     echo '    </td>
diff --git a/html/includes/print-alerts.inc.php b/html/includes/print-alerts.inc.php
index 8829f27c85..93911a212e 100644
--- a/html/includes/print-alerts.inc.php
+++ b/html/includes/print-alerts.inc.php
@@ -19,27 +19,27 @@ echo '<td>'.htmlspecialchars($alert_entry['name']).'</td>';
 
 if ($alert_state != '') {
     if ($alert_state == '0') {
-        $glyph_icon  = 'ok';
-        $glyph_color = 'green';
-        $text        = 'Ok';
+        $fa_icon  = 'check';
+        $fa_color = 'success';
+        $text     = 'Ok';
     } elseif ($alert_state == '1') {
-        $glyph_icon  = 'remove';
-        $glyph_color = 'red';
-        $text        = 'Alert';
+        $fa_icon  = 'remove';
+        $fa_color = 'danger';
+        $text     = 'Alert';
     } elseif ($alert_state == '2') {
-        $glyph_icon  = 'info-sign';
-        $glyph_color = 'lightgrey';
-        $text        = 'Ack';
+        $fa_icon  = 'info-circle';
+        $fa_color = 'muted';
+        $text     = 'Ack';
     } elseif ($alert_state == '3') {
-        $glyph_icon  = 'arrow-down';
-        $glyph_color = 'orange';
-        $text        = 'Worse';
+        $fa_icon  = 'arrow-down';
+        $fa_color = 'warning';
+        $text     = 'Worse';
     } elseif ($alert_state == '4') {
-        $glyph_icon  = 'arrow-up';
-        $glyph_color = 'khaki';
-        $text        = 'Better';
+        $fa_icon  = 'arrow-up';
+        $fa_color = 'info';
+        $text     = 'Better';
     }//end if
-    echo "<td><b><span class='glyphicon glyphicon-".$glyph_icon."' style='color:".$glyph_color."'></span> $text</b></td>";
+    echo "<td><b><i class='fa fa-fw fa-".$fa_icon." text-".$fa_color."'></i> $text</b></td>";
 }//end if
 
 echo '</tr>';
diff --git a/html/includes/print-interface.inc.php b/html/includes/print-interface.inc.php
index 414bdcf241..440dd80b94 100644
--- a/html/includes/print-interface.inc.php
+++ b/html/includes/print-interface.inc.php
@@ -232,7 +232,7 @@ if (strpos($port['label'], 'oopback') === false && !$graph_type) {
     }//end if
 
     if (count($int_links) > 3) {
-        echo '<div class="collapse-neighbors"><span class="neighbors-button glyphicon glyphicon-plus" aria-hidden="true"></span>
+        echo '<div class="collapse-neighbors"><i class="neighbors-button fa fa-plus" aria-hidden="true"></i>
                <span class="neighbors-interface-list-firsts" style="display: inline;">';
     }
 
diff --git a/html/includes/table/alertlog.inc.php b/html/includes/table/alertlog.inc.php
index 7d1ebfe2b7..9d0fc1d0a0 100644
--- a/html/includes/table/alertlog.inc.php
+++ b/html/includes/table/alertlog.inc.php
@@ -52,33 +52,33 @@ foreach (dbFetchRows($sql, $param) as $alertlog) {
     $fault_detail = alert_details($alertlog['details']);
     $alert_state  = $alertlog['state'];
     if ($alert_state == '0') {
-        $glyph_icon  = 'ok';
-        $glyph_color = 'green';
-        $text        = 'Ok';
+        $fa_icon  = 'check';
+        $fa_color = 'success';
+        $text     = 'Ok';
     } elseif ($alert_state == '1') {
-        $glyph_icon  = 'remove';
-        $glyph_color = 'red';
-        $text        = 'Alert';
+        $fa_icon  = 'times';
+        $fa_color = 'danger';
+        $text     = 'Alert';
     } elseif ($alert_state == '2') {
-        $glyph_icon  = 'info-sign';
-        $glyph_color = 'lightgrey';
-        $text        = 'Ack';
+        $fa_icon  = 'info-circle';
+        $fa_color = 'muted';
+        $text     = 'Ack';
     } elseif ($alert_state == '3') {
-        $glyph_icon  = 'arrow-down';
-        $glyph_color = 'orange';
-        $text        = 'Worse';
+        $fa_icon  = 'arrow-down';
+        $fa_color = 'warning';
+        $text     = 'Worse';
     } elseif ($alert_state == '4') {
-        $glyph_icon  = 'arrow-up';
-        $glyph_color = 'khaki';
-        $text        = 'Better';
+        $fa_icon  = 'arrow-up';
+        $fa_color = 'info';
+        $text     = 'Better';
     }//end if
     $response[] = array(
         'id'          => $rulei++,
         'time_logged' => $alertlog['humandate'],
-        'details'     => '<a class="glyphicon glyphicon-plus incident-toggle" style="display:none" data-toggle="collapse" data-target="#incident'.($rulei).'" data-parent="#alerts"></a>',
+        'details'     => '<a class="fa fa-plus incident-toggle" style="display:none" data-toggle="collapse" data-target="#incident'.($rulei).'" data-parent="#alerts"></a>',
         'hostname'    => '<div class="incident">'.generate_device_link($dev, shorthost($dev['hostname'])).'<div id="incident'.($rulei).'" class="collapse">'.$fault_detail.'</div></div>',
         'alert'       => htmlspecialchars($alertlog['alert']),
-        'status'      => "<b><span class='glyphicon glyphicon-".$glyph_icon."' style='color:".$glyph_color."'></span> $text</b>",
+        'status'      => "<b><i class='fa fa-".$glyph_icon." text-".$glyph_color."'></i> $text</b>",
     );
 }//end foreach
 
diff --git a/html/includes/table/alerts.inc.php b/html/includes/table/alerts.inc.php
index 802db97d66..dc8661fa77 100644
--- a/html/includes/table/alerts.inc.php
+++ b/html/includes/table/alerts.inc.php
@@ -101,12 +101,12 @@ foreach (dbFetchRows($sql, $param) as $alert) {
     $log          = dbFetchCell('SELECT details FROM alert_log WHERE rule_id = ? AND device_id = ? ORDER BY id DESC LIMIT 1', array($alert['rule_id'], $alert['device_id']));
     $fault_detail = alert_details($log);
 
-    $ico   = 'ok';
+    $ico   = 'check';
     $col   = 'green';
     $extra = '';
     $msg   = '';
     if ((int) $alert['state'] === 0) {
-        $ico   = 'ok';
+        $ico   = 'check';
         $col   = 'green';
         $extra = 'success';
         $msg   = 'ok';
@@ -154,7 +154,7 @@ foreach (dbFetchRows($sql, $param) as $alert) {
     $response[] = array(
         'id'        => $rulei++,
         'rule'      => '<i title="'.htmlentities($alert['rule']).'"><a href="'.generate_url(array('page'=>'alert-rules')).'">'.htmlentities($alert['name']).'</a></i>',
-        'details'   => '<a class="glyphicon glyphicon-plus incident-toggle" style="display:none" data-toggle="collapse" data-target="#incident'.($rulei).'" data-parent="#alerts"></a>',
+        'details'   => '<a class="fa fa-plus incident-toggle" style="display:none" data-toggle="collapse" data-target="#incident'.($rulei).'" data-parent="#alerts"></a>',
         'hostname'  => $hostname,
         'timestamp' => ($alert['timestamp'] ? $alert['timestamp'] : 'N/A'),
         'severity'  => $severity,
diff --git a/html/includes/table/edit-ports.inc.php b/html/includes/table/edit-ports.inc.php
index 78797b79a5..5eec910397 100644
--- a/html/includes/table/edit-ports.inc.php
+++ b/html/includes/table/edit-ports.inc.php
@@ -70,8 +70,8 @@ foreach (dbFetchRows($sql, $param) as $port) {
         'ignore'           => '<input type="checkbox" class="ignore-check" name="ignore_'.$port['port_id'].'"'.($port['ignore'] ? 'checked' : '').'>
                                <input type="hidden" name="oldign_'.$port['port_id'].'" value="'.($port['ignore'] ? 1 : 0).'"">',
         'port_tune'        => '<input type="checkbox" id="override_config" name="override_config" data-attrib="ifName_tune:'.$port['ifName'].'" data-device_id="'.$port['device_id'].'" data-size="small" '.$checked.'>',
-        'ifAlias'          => '<div class="form-group"><input class="form-control input-sm" id="if-alias" name="if-alias" data-device_id="'.$port['device_id'].'" data-port_id="'.$port['port_id'].'" data-ifName="'.$port['ifName'].'" value="'.$port['ifAlias'].'"><span class="glyphicon form-control-feedback" aria-hidden="true"></span></div>',
-        'ifSpeed'          => '<div class="form-group has-feedback"><input type="text" pattern="[0-9]*" inputmode="numeric" class="form-control input-sm" id="if-speed" name="if-speed" data-device_id="'.$port['device_id'].'" data-port_id="'.$port['port_id'].'" data-ifName="'.$port['ifName'].'" value="'.$port['ifSpeed'].'"><span class="glyphicon form-control-feedback" aria-hidden="true"></span></div>',
+        'ifAlias'          => '<div class="form-group"><input class="form-control input-sm" id="if-alias" name="if-alias" data-device_id="'.$port['device_id'].'" data-port_id="'.$port['port_id'].'" data-ifName="'.$port['ifName'].'" value="'.$port['ifAlias'].'"><span class="form-control-feedback"><i class="fa" aria-hidden="true"></i></span></div>',
+        'ifSpeed'          => '<div class="form-group has-feedback"><input type="text" pattern="[0-9]*" inputmode="numeric" class="form-control input-sm" id="if-speed" name="if-speed" data-device_id="'.$port['device_id'].'" data-port_id="'.$port['port_id'].'" data-ifName="'.$port['ifName'].'" value="'.$port['ifSpeed'].'"><span class="form-control-feedback"><i class="fa" aria-hidden="true"></i></span></div>',
     );
 }//end foreach
 
diff --git a/html/js/librenms.js b/html/js/librenms.js
index b0b1fd886c..686c60a5cc 100644
--- a/html/js/librenms.js
+++ b/html/js/librenms.js
@@ -213,11 +213,11 @@ $(document).on("click", '.collapse-neighbors', function(event)
     var list = caller.find('.neighbors-interface-list');
     var continued = caller.find('.neighbors-list-continued');
 
-    if(button.hasClass("glyphicon-plus")) {
-        button.addClass('glyphicon-minus').removeClass('glyphicon-plus');
+    if(button.hasClass("fa-plus")) {
+        button.addClass('fa-minus').removeClass('fa-plus');
     }
     else {
-        button.addClass('glyphicon-plus').removeClass('glyphicon-minus');
+        button.addClass('fa-plus').removeClass('fa-minus');
     }
    
     list.toggle();
diff --git a/html/pages/alert-log.inc.php b/html/pages/alert-log.inc.php
index 4a2655d16b..372b4e7843 100644
--- a/html/pages/alert-log.inc.php
+++ b/html/pages/alert-log.inc.php
@@ -99,7 +99,7 @@ foreach (get_all_devices() as $hostname) {
     }).on("click", function(e) {
       var target = $(this).data("target");
       $(target).collapse('toggle');
-      $(this).toggleClass('glyphicon-plus glyphicon-minus');
+      $(this).toggleClass('fa-plus fa-minus');
     });
     grid.find(".incident").each( function() {
       $(this).parent().addClass('col-lg-4 col-md-4 col-sm-4 col-xs-4');
@@ -109,8 +109,8 @@ foreach (get_all_devices() as $hostname) {
         $(this).find(".incident-toggle").fadeOut(200);
       }).on("click", "td:not(.incident-toggle-td)", function() {
         var target = $(this).parent().find(".incident-toggle").data("target");
-        if( $(this).parent().find(".incident-toggle").hasClass('glyphicon-plus') ) {
-          $(this).parent().find(".incident-toggle").toggleClass('glyphicon-plus glyphicon-minus');
+        if( $(this).parent().find(".incident-toggle").hasClass('fa-plus') ) {
+          $(this).parent().find(".incident-toggle").toggleClass('fa-plus fa-minus');
           $(target).collapse('toggle');
         }
       });
diff --git a/html/pages/alert-map.inc.php b/html/pages/alert-map.inc.php
index 25880c1bcc..eb6665675c 100644
--- a/html/pages/alert-map.inc.php
+++ b/html/pages/alert-map.inc.php
@@ -21,8 +21,8 @@ foreach (dbFetchRows('SELECT alert_map.target,alert_map.id,alert_rules.name FROM
     echo '<td>'.$link['name'].'</td>';
     echo '<td>'.$link['target'].'</td>';
     echo '<td>';
-        echo "<button type='button' class='btn btn-primary btn-sm' aria-label='Edit' data-toggle='modal' data-target='#create-map' data-map_id='".$link['id']."' name='edit-alert-map'><span class='glyphicon glyphicon-pencil' aria-hidden='true'></span></button> ";
-        echo "<button type='button' class='btn btn-danger btn-sm' aria-label='Delete' data-toggle='modal' data-target='#confirm-delete' data-map_id='".$link['id']."' name='delete-alert-map'><span class='glyphicon glyphicon-trash' aria-hidden='true'></span></button>";
+        echo "<button type='button' class='btn btn-primary btn-sm' aria-label='Edit' data-toggle='modal' data-target='#create-map' data-map_id='".$link['id']."' name='edit-alert-map'><i class='fa fa-pencil' aria-hidden='true'></i></button> ";
+        echo "<button type='button' class='btn btn-danger btn-sm' aria-label='Delete' data-toggle='modal' data-target='#confirm-delete' data-map_id='".$link['id']."' name='delete-alert-map'><span class='fa fa-trash' aria-hidden='true'></i></button>";
     echo '</td>';
     echo '</tr>';
 }
diff --git a/html/pages/device-groups.inc.php b/html/pages/device-groups.inc.php
index 0f1dd6a8fe..6d84020aeb 100644
--- a/html/pages/device-groups.inc.php
+++ b/html/pages/device-groups.inc.php
@@ -16,8 +16,8 @@ if (!empty($group_count_check)) {
         echo '<td>'.$group['desc'].'</td>';
         echo '<td>'.$group['pattern'].'</td>';
         echo '<td>';
-        echo "<button type='button' class='btn btn-primary btn-sm' aria-label='Edit' data-toggle='modal' data-target='#create-group' data-group_id='".$group['id']."' name='edit-device-group'><span class='glyphicon glyphicon-pencil' aria-hidden='true'></span></button> ";
-        echo "<button type='button' class='btn btn-danger btn-sm' aria-label='Delete' data-toggle='modal' data-target='#confirm-delete' data-group_id='".$group['id']."' name='delete-device-group'><span class='glyphicon glyphicon-trash' aria-hidden='true'></span></button>";
+        echo "<button type='button' class='btn btn-primary btn-sm' aria-label='Edit' data-toggle='modal' data-target='#create-group' data-group_id='".$group['id']."' name='edit-device-group'><i class='fa fa-pencil' aria-hidden='true'></i></button> ";
+        echo "<button type='button' class='btn btn-danger btn-sm' aria-label='Delete' data-toggle='modal' data-target='#confirm-delete' data-group_id='".$group['id']."' name='delete-device-group'><i class='fa fa-trash' aria-hidden='true'></i></button>";
         echo '</td>';
         echo '</tr>';
     }
diff --git a/html/pages/device/edit/health.inc.php b/html/pages/device/edit/health.inc.php
index e5f104fa97..8073e19b39 100644
--- a/html/pages/device/edit/health.inc.php
+++ b/html/pages/device/edit/health.inc.php
@@ -58,13 +58,17 @@ foreach (dbFetchRows("SELECT * FROM sensors WHERE device_id = ? AND sensor_delet
         <td>
         <div class="form-group has-feedback">
         <input type="text" class="form-control input-sm sensor" id="high-'.$sensor['device_id'].'" data-device_id="'.$sensor['device_id'].'" data-value_type="sensor_limit" data-sensor_id="'.$sensor['sensor_id'].'" value="'.$sensor['sensor_limit'].'">
-        <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+        <span class="form-control-feedback">
+            <i class="fa" aria-hidden="true"></i>
+        </span>
         </div>
         </td>
         <td>
         <div class="form-group has-feedback">
         <input type="text" class="form-control input-sm sensor" id="low-'.$sensor['device_id'].'" data-device_id="'.$sensor['device_id'].'" data-value_type="sensor_limit_low" data-sensor_id="'.$sensor['sensor_id'].'" value="'.$sensor['sensor_limit_low'].'">
-        <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+        <span class="form-control-feedback">
+            <i class="fa" aria-hidden="true"></i>
+        </span>
         </div>
         </td>
         <td>
@@ -128,18 +132,18 @@ $( ".sensor" ).blur(function() {
             dataType: "html",
             success: function(data){
                 $this.closest('.form-group').addClass('has-success');
-                $this.next().addClass('glyphicon-ok');
+                $this.next().addClass('fa-check');
                 setTimeout(function(){
                     $this.closest('.form-group').removeClass('has-success');
-                    $this.next().removeClass('glyphicon-ok');
+                    $this.next().removeClass('fa-check');
                 }, 2000);
             },
                 error:function(){
                     $(this).closest('.form-group').addClass('has-error');
-                    $this.next().addClass('glyphicon-remove');
+                    $this.next().addClass('fa-times');
                     setTimeout(function(){
                         $this.closest('.form-group').removeClass('has-error');
-                        $this.next().removeClass('glyphicon-remove');
+                        $this.next().removeClass('fa-times');
                     }, 2000);
                 }
     });
diff --git a/html/pages/device/edit/ports.inc.php b/html/pages/device/edit/ports.inc.php
index bd37f5cb2f..86aedef1cc 100644
--- a/html/pages/device/edit/ports.inc.php
+++ b/html/pages/device/edit/ports.inc.php
@@ -41,28 +41,28 @@
             success: function (data) {
                 if (data.status == 'ok') {
                     $this.closest('.form-group').addClass('has-success');
-                    $this.next().addClass('glyphicon-ok');
+                    $this.next().addClass('fa-check');
                     setTimeout(function(){
                         $this.closest('.form-group').removeClass('has-success');
-                        $this.next().removeClass('glyphicon-ok');
+                        $this.next().removeClass('fa-check');
                     }, 2000);
                 } else if (data.status == 'na') {
 
                 } else {
                     $(this).closest('.form-group').addClass('has-error');
-                    $this.next().addClass('glyphicon-remove');
+                    $this.next().addClass('fa-times');
                     setTimeout(function(){
                         $this.closest('.form-group').removeClass('has-error');
-                        $this.next().removeClass('glyphicon-remove');
+                        $this.next().removeClass('fa-times');
                     }, 2000);
                 }
             },
             error: function () {
                 $(this).closest('.form-group').addClass('has-error');
-                $this.next().addClass('glyphicon-remove');
+                $this.next().addClass('fa-times');
                 setTimeout(function(){
                    $this.closest('.form-group').removeClass('has-error');
-                   $this.next().removeClass('glyphicon-remove');
+                   $this.next().removeClass('fa-times');
                 }, 2000);
             }
         });
@@ -82,29 +82,29 @@
             success: function (data) {
                 if (data.status == 'ok') {
                     $this.closest('.form-group').addClass('has-success');
-                    $this.next().addClass('glyphicon-ok');
+                    $this.next().addClass('fa-check');
                     $this.val(speed);
                     setTimeout(function(){
                         $this.closest('.form-group').removeClass('has-success');
-                        $this.next().removeClass('glyphicon-ok');
+                        $this.next().removeClass('fa-check');
                     }, 2000);
                 } else if (data.status == 'na') {
 
                 } else {
                     $(this).closest('.form-group').addClass('has-error');
-                    $this.next().addClass('glyphicon-remove');
+                    $this.next().addClass('fa-times');
                     setTimeout(function(){
                         $this.closest('.form-group').removeClass('has-error');
-                        $this.next().removeClass('glyphicon-remove');
+                        $this.next().removeClass('fa-times');
                     }, 2000);
                 }
             },
             error: function () {
                 $(this).closest('.form-group').addClass('has-error');
-                $this.next().addClass('glyphicon-remove');
+                $this.next().addClass('fa-times');
                 setTimeout(function(){
                    $this.closest('.form-group').removeClass('has-error');
-                   $this.next().removeClass('glyphicon-remove');
+                   $this.next().removeClass('fa-times');
                 }, 2000);
             }
         });
diff --git a/html/pages/device/processes.inc.php b/html/pages/device/processes.inc.php
index 299b5ec0da..0ca7f1a7ce 100644
--- a/html/pages/device/processes.inc.php
+++ b/html/pages/device/processes.inc.php
@@ -72,7 +72,7 @@ foreach ($heads as $head => $extra) {
     $bhead = 'asc';
     $icon  = '';
     if ('`'.$lhead.'`' == $order) {
-        $icon = " class='glyphicon glyphicon-chevron-";
+        $icon = " class='fa fa-chevron-";
         if ($by == 'asc') {
             $bhead = 'desc';
             $icon .= 'up';
diff --git a/html/pages/device/routing/cisco-otv.inc.php b/html/pages/device/routing/cisco-otv.inc.php
index 00d8794abb..da68ecca11 100644
--- a/html/pages/device/routing/cisco-otv.inc.php
+++ b/html/pages/device/routing/cisco-otv.inc.php
@@ -11,7 +11,7 @@ global $config;
 ?>
 <div class="panel panel-default" id="overlays">
     <div class="panel-heading">
-        <h3 class="panel-title">Overlay's & Adjacencies</h3>
+        <h3 class="panel-title">Overlay's &amp; Adjacencies</h3>
     </div>
     <div class="panel list-group">
 <?php
@@ -39,7 +39,7 @@ foreach ($components as $aid => $adjacency) {
             $gli = "list-group-item-danger";
         }
 ?>
-    <a class="list-group-item <?php echo $gli?> small"><span class="glyphicon glyphicon-chevron-right"></span> <?php echo $adjacency['label']?> - <?php echo $adjacency['endpoint']?> <?php echo $adj_status?></a>
+    <a class="list-group-item <?php echo $gli?> small"><i class="fa fa-chevron-right" aria-hidden="true"></i> <?php echo $adjacency['label']?> - <?php echo $adjacency['endpoint']?> <?php echo $adj_status?></a>
 <?php
     }
 }
diff --git a/html/pages/device/services.inc.php b/html/pages/device/services.inc.php
index b6b3a8374c..844017d7eb 100644
--- a/html/pages/device/services.inc.php
+++ b/html/pages/device/services.inc.php
@@ -68,8 +68,8 @@ foreach ($services as $service) {
                 <div class="col-sm-6"><?php echo $service['service_desc']?></div>
                 <div class="col-sm-2"><?php echo $status?></div>
                 <div class="pull-right">
-                    <button type='button' class='btn btn-primary btn-sm' aria-label='Edit' data-toggle='modal' data-target='#create-service' data-service_id='<?php echo $service['service_id']?>' name='edit-service'><span class='glyphicon glyphicon-pencil' aria-hidden='true'></span></button>
-                    <button type='button' class='btn btn-danger btn-sm' aria-label='Delete' data-toggle='modal' data-target='#confirm-delete' data-service_id='<?php echo $service['service_id']?>' name='delete-service'><span class='glyphicon glyphicon-trash' aria-hidden='true'></span></button>
+                    <button type='button' class='btn btn-primary btn-sm' aria-label='Edit' data-toggle='modal' data-target='#create-service' data-service_id='<?php echo $service['service_id']?>' name='edit-service'><i class='fa fa-pencil' aria-hidden='true'></i></button>
+                    <button type='button' class='btn btn-danger btn-sm' aria-label='Delete' data-toggle='modal' data-target='#confirm-delete' data-service_id='<?php echo $service['service_id']?>' name='delete-service'><i class='fa fa-trash' aria-hidden='true'></i></button>
                 </div>
             </div>
             <div class="col-sm-12">
diff --git a/html/pages/health/mempool.inc.php b/html/pages/health/mempool.inc.php
index 47a430d4da..f69374ff4d 100644
--- a/html/pages/health/mempool.inc.php
+++ b/html/pages/health/mempool.inc.php
@@ -29,7 +29,7 @@
                 return "<h4><span class='label label-"+row.extra+" threeqtr-width'>" + row.msg + "</span></h4>";
             },
             "ack": function(column,row) {
-                return "<button type='button' class='btn btn-"+row.ack_col+" btn-sm command-ack-alert' data-target='#ack-alert' data-state='"+row.state+"' data-alert_id='"+row.alert_id+"' name='ack-alert' id='ack-alert' data-extra='"+row.extra+"'><span class='glyphicon glyphicon-"+row.ack_ico+"'aria-hidden='true'></span></button>";
+                return "<button type='button' class='btn btn-"+row.ack_col+" btn-sm command-ack-alert' data-target='#ack-alert' data-state='"+row.state+"' data-alert_id='"+row.alert_id+"' name='ack-alert' id='ack-alert' data-extra='"+row.extra+"'><i class='fa fa-"+row.ack_ico+"'aria-hidden='true'></i></button>";
             }
         },
         templates: {
diff --git a/html/pages/health/processor.inc.php b/html/pages/health/processor.inc.php
index cfef63060d..1ff103d1ba 100644
--- a/html/pages/health/processor.inc.php
+++ b/html/pages/health/processor.inc.php
@@ -28,7 +28,7 @@
                 return "<h4><span class='label label-"+row.extra+" threeqtr-width'>" + row.msg + "</span></h4>";
             },
             "ack": function(column,row) {
-                return "<button type='button' class='btn btn-"+row.ack_col+" btn-sm command-ack-alert' data-target='#ack-alert' data-state='"+row.state+"' data-alert_id='"+row.alert_id+"' name='ack-alert' id='ack-alert' data-extra='"+row.extra+"'><span class='glyphicon glyphicon-"+row.ack_ico+"'aria-hidden='true'></span></button>";
+                return "<button type='button' class='btn btn-"+row.ack_col+" btn-sm command-ack-alert' data-target='#ack-alert' data-state='"+row.state+"' data-alert_id='"+row.alert_id+"' name='ack-alert' id='ack-alert' data-extra='"+row.extra+"'><i class='fa fa-"+row.ack_ico+"'aria-hidden='true'></i></button>";
             }
         },
         templates: {
diff --git a/html/pages/health/storage.inc.php b/html/pages/health/storage.inc.php
index acb7e70ed5..9c6ab38b0e 100644
--- a/html/pages/health/storage.inc.php
+++ b/html/pages/health/storage.inc.php
@@ -29,7 +29,7 @@
                 return "<h4><span class='label label-"+row.extra+" threeqtr-width'>" + row.msg + "</span></h4>";
             },
             "ack": function(column,row) {
-                return "<button type='button' class='btn btn-"+row.ack_col+" btn-sm command-ack-alert' data-target='#ack-alert' data-state='"+row.state+"' data-alert_id='"+row.alert_id+"' name='ack-alert' id='ack-alert' data-extra='"+row.extra+"'><span class='glyphicon glyphicon-"+row.ack_ico+"'aria-hidden='true'></span></button>";
+                return "<button type='button' class='btn btn-"+row.ack_col+" btn-sm command-ack-alert' data-target='#ack-alert' data-state='"+row.state+"' data-alert_id='"+row.alert_id+"' name='ack-alert' id='ack-alert' data-extra='"+row.extra+"'><i class='fa fa-"+row.ack_ico+"'aria-hidden='true'></i></button>";
             }
         },
         templates: {
diff --git a/html/pages/routing/cisco-otv.inc.php b/html/pages/routing/cisco-otv.inc.php
index 17c7ac3c6d..41fa98ce2f 100644
--- a/html/pages/routing/cisco-otv.inc.php
+++ b/html/pages/routing/cisco-otv.inc.php
@@ -39,7 +39,7 @@ foreach ($COMPONENTS as $DEVICE_ID => $COMP) {
                                 $GLI = "list-group-item-danger";
                             }
                             ?>
-                            <a class="list-group-item <?php echo $GLI?> small"><span class="glyphicon glyphicon-chevron-right"></span> <?php echo $ADJACENCY['label']?> - <?php echo $ADJACENCY['endpoint']?> <?php echo $ADJ_STATUS?></a>
+                            <a class="list-group-item <?php echo $GLI?> small"><i class="fa fa-chevron-right" aria-hidden="true"></i> <?php echo $ADJACENCY['label']?> - <?php echo $ADJACENCY['endpoint']?> <?php echo $ADJ_STATUS?></a>
                         <?php
                         }
                     }
diff --git a/html/pages/services.inc.php b/html/pages/services.inc.php
index d29e41b88d..1f614b5e68 100644
--- a/html/pages/services.inc.php
+++ b/html/pages/services.inc.php
@@ -134,8 +134,8 @@ foreach (dbFetchRows($host_sql, $host_par) as $device) {
         <td><span class='box-desc'><?php echo nl2br(trim($service['service_message']))?></span></td>
         <td><span class='box-desc'><?php echo nl2br(trim($service['service_desc']))?></span></td>
         <td>
-            <button type='button' class='btn btn-primary btn-sm' aria-label='Edit' data-toggle='modal' data-target='#create-service' data-service_id='<?php echo $service['service_id']?>' name='edit-service'><span class='glyphicon glyphicon-pencil' aria-hidden='true'></span></button>
-            <button type='button' class='btn btn-danger btn-sm' aria-label='Delete' data-toggle='modal' data-target='#confirm-delete' data-service_id='<?php echo $service['service_id']?>' name='delete-service'><span class='glyphicon glyphicon-trash' aria-hidden='true'></span></button>
+            <button type='button' class='btn btn-primary btn-sm' aria-label='Edit' data-toggle='modal' data-target='#create-service' data-service_id='<?php echo $service['service_id']?>' name='edit-service'><i class='fa fa-pencil' aria-hidden='true'></i></button>
+            <button type='button' class='btn btn-danger btn-sm' aria-label='Delete' data-toggle='modal' data-target='#confirm-delete' data-service_id='<?php echo $service['service_id']?>' name='delete-service'><i class='fa fa-trash' aria-hidden='true'></i></button>
         </td>
     </tr>
 <?php
diff --git a/html/pages/settings/alerting.inc.php b/html/pages/settings/alerting.inc.php
index 3e00b8eeaf..08c7f4839c 100644
--- a/html/pages/settings/alerting.inc.php
+++ b/html/pages/settings/alerting.inc.php
@@ -316,7 +316,9 @@ foreach ($api_urls as $api_url) {
                         <label for="api_url" class="col-sm-4 control-label">API URL ('.$api_method.') </label>
                         <div class="col-sm-4">
                             <input id="api_url" class="form-control" type="text" name="global-config-input" value="'.$api_url['config_value'].'" data-config_id="'.$api_url['config_id'].'">
-                            <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                            <span class="form-control-feedback">
+                                <i class="fa" aria-hidden="true"></i>
+                            </span>
                         </div>
                         <div class="col-sm-2">
                             <button type="button" class="btn btn-danger del-api-config" name="del-api-call" data-config_id="'.$api_url['config_id'].'"><i class="fa fa-minus"></i></button>
@@ -328,7 +330,9 @@ foreach ($api_urls as $api_url) {
                         <label for="api_url" class="col-sm-4 control-label api-method">API URL </label>
                         <div class="col-sm-4">
                             <input id="api_url" class="form-control" type="text" name="global-config-input" value="" data-config_id="">
-                            <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                            <span class="form-control-feedback">
+                                <i class="fa" aria-hidden="true"></i>
+                            </span>
                         </div>
                         <div class="col-sm-2">
                             <button type="button" class="btn btn-danger del-api-config" name="del-api-call" data-config_id=""><i class="fa fa-minus"></i></button>
@@ -371,10 +375,12 @@ if (empty($config_groups['alert.transports.pagerduty']['config_value']) === fals
                 <div class="panel-body">
                     <div class="form-group has-feedback">
                         <label for="nagios" class="col-sm-4 control-label">Nagios compatible FIFO </label>
-                        <div data-toggle="tooltip" title="'.$config_groups['alert.transports.nagios']['config_descr'].'" class="toolTip glyphicon glyphicon-question-sign"></div>
+                        <div data-toggle="tooltip" title="'.$config_groups['alert.transports.nagios']['config_descr'].'" class="toolTip fa fa-question-sign"></div>
                         <div class="col-sm-4">
                             <input id="nagios" class="form-control" type="text" name="global-config-input" value="'.$config_groups['alert.transports.nagios']['config_value'].'" data-config_id="'.$config_groups['alert.transports.nagios']['config_id'].'">
-                            <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                            <span class="form-control-feedback">
+                                <i class="fa" aria-hidden="true"></i>
+                            </span>
                         </div>
                     </div>
                 </div>
@@ -390,7 +396,7 @@ if (empty($config_groups['alert.transports.pagerduty']['config_value']) === fals
                 <div class="panel-body">
                     <div class="form-group">
                         <label for="irc" class="col-sm-4 control-label">Enable irc transport </label>
-                        <div data-toggle="tooltip" title="'.$config_groups['alert.transports.irc']['config_descr'].'" class="toolTip glyphicon glyphicon-question-sign"></div>
+                        <div data-toggle="tooltip" title="'.$config_groups['alert.transports.irc']['config_descr'].'" class="toolTip fa fa-question-circle"></div>
                         <div class="col-sm-4">
                             <input id="irc" type="checkbox" name="global-config-check" '.$config_groups['alert.transports.irc']['config_checked'].' data-on-text="Yes" data-off-text="No" data-size="small" data-config_id="'.$config_groups['alert.transports.irc']['config_id'].'">
                         </div>
@@ -429,7 +435,9 @@ foreach ($slack_urls as $slack_url) {
                             <label for="slack_url" class="col-sm-4 control-label">Slack URL </label>
                             <div class="col-sm-4">
                                 <input id="slack_url" class="form-control" type="text" name="global-config-input" value="'.$slack_url['config_value'].'" data-config_id="'.$slack_url['config_id'].'">
-                                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                                <span class="form-control-feedback">
+                                    <i class="fa" aria-hidden="true"></i>
+                                </span>
                             </div>
                             <div class="col-sm-2">
                                 <button type="button" class="btn btn-danger del-slack-config" name="del-slack-call" data-config_id="'.$slack_url['config_id'].'"><i class="fa fa-minus"></i></button>
@@ -438,7 +446,9 @@ foreach ($slack_urls as $slack_url) {
                         <div class="form-group has-feedback">
                             <div class="col-sm-offset-4 col-sm-4">
                                 <textarea class="form-control" name="global-config-textarea" id="upd_slack_extra" placeholder="Enter the config options" data-config_id="'.$slack_url['config_id'].'" data-type="slack">'.$upd_slack_extra.'</textarea>
-                                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                                <span class="form-control-feedback">
+                                    <i class="fa" aria-hidden="true"></i>
+                                </span>
                             </div>
                         </div>
                     </div>';
@@ -449,7 +459,9 @@ foreach ($slack_urls as $slack_url) {
                             <label for="slack_url" class="col-sm-4 control-label api-method">Slack URL </label>
                             <div class="col-sm-4">
                                 <input id="slack_url" class="form-control" type="text" name="global-config-input" value="" data-config_id="">
-                                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                                <span class="form-control-feedback">
+                                    <i class="fa" aria-hidden="true"></i>
+                                </span>
                             </div>
                             <div class="col-sm-2">
                                 <button type="button" class="btn btn-danger del-slack-config" name="del-slack-call" data-config_id=""><i class="fa fa-minus"></i></button>
@@ -497,7 +509,9 @@ foreach ($hipchat_urls as $hipchat_url) {
                             <label for="hipchat_url" class="col-sm-4 control-label">Hipchat URL </label>
                             <div class="col-sm-4">
                                 <input id="hipchat_url" class="form-control" type="text" name="global-config-input" value="'.$hipchat_url['config_value'].'" data-config_id="'.$hipchat_url['config_id'].'">
-                                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                                <span class="form-control-feedback">
+                                    <i class="fa" aria-hidden="true"></i>
+                                </span>
                             </div>
                             <div class="col-sm-2">
                                 <button type="button" class="btn btn-danger del-hipchat-config" name="del-hipchat-call" data-config_id="'.$hipchat_url['config_id'].'"><i class="fa fa-minus"></i></button>
@@ -507,20 +521,26 @@ foreach ($hipchat_urls as $hipchat_url) {
                             <label for="hipchat_room_id" class="col-sm-4 control-label">Room ID</label>
                             <div class="col-sm-4">
                                 <input id="hipchat_room_id" class="form-control" type="text" name="global-config-input" value="'.$hipchat_room_id['config_value'].'" data-config_id="'.$hipchat_room_id['config_id'].'">
-                                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                                <span class="form-control-feedback">
+    <i class="fa" aria-hidden="true"></i>
+</span>
                             </div>
                         </div>
                         <div class="form-group has-feedback">
                             <label for="hipchat_from" class="col-sm-4 control-label">From</label>
                             <div class="col-sm-4">
                                 <input id="hipchat_from" class="form-control" type="text" name="global-config-input" value="'.$hipchat_from['config_value'].'" data-config_id="'.$hipchat_from['config_id'].'">
-                                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                                <span class="form-control-feedback">
+    <i class="fa" aria-hidden="true"></i>
+</span>
                             </div>
                         </div>
                         <div class="form-group has-feedback">
                             <div class="col-sm-offset-4 col-sm-4">
                                 <textarea class="form-control" name="global-config-textarea" id="upd_hipchat_extra" placeholder="Enter the config options" data-config_id="'.$hipchat_url['config_id'].'" data-type="hipchat">'.$upd_hipchat_extra.'</textarea>
-                                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                                <span class="form-control-feedback">
+    <i class="fa" aria-hidden="true"></i>
+</span>
                             </div>
                         </div>
                     </div>';
@@ -531,7 +551,9 @@ foreach ($hipchat_urls as $hipchat_url) {
                             <label for="hipchat_url" class="col-sm-4 control-label api-method">Hipchat URL </label>
                             <div class="col-sm-4">
                                 <input id="hipchat_url" class="form-control" type="text" name="global-config-input" value="" data-config_id="">
-                                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                                <span class="form-control-feedback">
+    <i class="fa" aria-hidden="true"></i>
+</span>
                             </div>
                             <div class="col-sm-2">
                                 <button type="button" class="btn btn-danger del-hipchat-config" id="del-hipchat-call" name="del-hipchat-call" data-config_id=""><i class="fa fa-minus"></i></button>
@@ -541,14 +563,18 @@ foreach ($hipchat_urls as $hipchat_url) {
                             <label for="hipchat_room_id" class="col-sm-4 control-label">Room ID</label>
                             <div class="col-sm-4">
                                 <input id="global-config-room_id" class="form-control" type="text" name="global-config-input" value="" data-config_id="">
-                                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                                <span class="form-control-feedback">
+    <i class="fa" aria-hidden="true"></i>
+</span>
                             </div>
                         </div>
                         <div class="form-group has-feedback">
                             <label for="hipchat_from" class="col-sm-4 control-label">From</label>
                             <div class="col-sm-4">
                                 <input id="global-config-from" class="form-control" type="text" name="global-config-input" value="" data-config_id="">
-                                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                                <span class="form-control-feedback">
+    <i class="fa" aria-hidden="true"></i>
+</span>
                             </div>
                         </div>
                         <div class="form-group has-feedback">
@@ -592,7 +618,9 @@ foreach ($pushover_appkeys as $pushover_appkey) {
                             <label for="pushover_appkey" class="col-sm-4 control-label">Pushover Appkey </label>
                             <div class="col-sm-4">
                                 <input id="pushover_appkey" class="form-control" type="text" name="global-config-input" value="'.$pushover_appkey['config_value'].'" data-config_id="'.$pushover_appkey['config_id'].'">
-                                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                                <span class="form-control-feedback">
+    <i class="fa" aria-hidden="true"></i>
+</span>
                             </div>
                             <div class="col-sm-2">
                                 <button type="button" class="btn btn-danger del-pushover-config" name="del-pushover-call" data-config_id="'.$pushover_appkey['config_id'].'"><i class="fa fa-minus"></i></button>
@@ -602,13 +630,17 @@ foreach ($pushover_appkeys as $pushover_appkey) {
                             <label for="pushover_userkey" class="col-sm-4 control-label">Userkey</label>
                             <div class="col-sm-4">
                                 <input id="pushover_userkey" class="form-control" type="text" name="global-config-input" value="'.$pushover_userkey['config_value'].'" data-config_id="'.$pushover_userkey['config_id'].'">
-                                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                                <span class="form-control-feedback">
+    <i class="fa" aria-hidden="true"></i>
+</span>
                             </div>
                         </div>
                         <div class="form-group has-feedback">
                             <div class="col-sm-offset-4 col-sm-4">
                                 <textarea class="form-control" name="global-config-textarea" id="upd_pushover_extra" placeholder="Enter the config options" data-config_id="'.$pushover_appkey['config_id'].'" data-type="pushover">'.$upd_pushover_extra.'</textarea>
-                                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                                <span class="form-control-feedback">
+    <i class="fa" aria-hidden="true"></i>
+</span>
                             </div>
                         </div>
                     </div>';
@@ -619,7 +651,9 @@ echo '<div id="pushover_appkey_template" class="hide">
                             <label for="pushover_appkey" class="col-sm-4 control-label api-method">Pushover Appkey </label>
                             <div class="col-sm-4">
                                 <input id="pushover_appkey" class="form-control" type="text" name="global-config-input" value="" data-config_id="">
-                                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                                <span class="form-control-feedback">
+    <i class="fa" aria-hidden="true"></i>
+</span>
                             </div>
                             <div class="col-sm-2">
                                 <button type="button" class="btn btn-danger del-pushover-config" id="del-pushover-call" name="del-pushover-call" data-config_id=""><i class="fa fa-minus"></i></button>
@@ -629,7 +663,9 @@ echo '<div id="pushover_appkey_template" class="hide">
                             <label for="pushover_userkey" class="col-sm-4 control-label">Userkey</label>
                             <div class="col-sm-4">
                                 <input id="global-config-userkey" class="form-control" type="text" name="global-config-input" value="" data-config_id="">
-                                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                                <span class="form-control-feedback">
+    <i class="fa" aria-hidden="true"></i>
+</span>
                             </div>
                         </div>
                         <div class="form-group has-feedback">
@@ -672,7 +708,9 @@ foreach ($boxcar_appkeys as $boxcar_appkey) {
                             <label for="boxcar_access_token" class="col-sm-4 control-label">Boxcar Access token </label>
                             <div class="col-sm-4">
                                 <input id="boxcar_access_token" class="form-control" type="text" name="global-config-input" value="'.$boxcar_appkey['config_value'].'" data-config_id="'.$boxcar_appkey['config_id'].'">
-                                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                                <span class="form-control-feedback">
+    <i class="fa" aria-hidden="true"></i>
+</span>
                             </div>
                             <div class="col-sm-2">
                                 <button type="button" class="btn btn-danger del-boxcar-config" name="del-boxcar-call" data-config_id="'.$boxcar_appkey['config_id'].'"><i class="fa fa-minus"></i></button>
@@ -681,7 +719,9 @@ foreach ($boxcar_appkeys as $boxcar_appkey) {
                         <div class="form-group has-feedback">
                             <div class="col-sm-offset-4 col-sm-4">
                                 <textarea class="form-control" name="global-config-textarea" id="upd_boxcar_extra" placeholder="Enter the config options" data-config_id="'.$boxcar_appkey['config_id'].'" data-type="boxcar">'.$upd_boxcar_extra.'</textarea>
-                                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                                <span class="form-control-feedback">
+    <i class="fa" aria-hidden="true"></i>
+</span>
                             </div>
                         </div>
                     </div>';
@@ -692,7 +732,9 @@ echo '<div id="boxcar_appkey_template" class="hide">
                             <label for="boxcar_access_token" class="col-sm-4 control-label api-method">Boxcar Access token </label>
                             <div class="col-sm-4">
                                 <input id="boxcar_access_token" class="form-control" type="text" name="global-config-input" value="" data-config_id="">
-                                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                                <span class="form-control-feedback">
+    <i class="fa" aria-hidden="true"></i>
+</span>
                             </div>
                             <div class="col-sm-2">
                                 <button type="button" class="btn btn-danger del-boxcar-config" id="del-boxcar-call" name="del-boxcar-call" data-config_id=""><i class="fa fa-minus"></i></button>
@@ -717,10 +759,12 @@ echo '<div id="boxcar_appkey_template" class="hide">
                 <div class="panel-body">
                     <div class="form-group has-feedback">
                         <label for="pushbullet" class="col-sm-4 control-label">Pushbullet Access Token </label>
-                        <div data-toggle="tooltip" title="'.$config_groups['alert.transports.pushbullet']['config_descr'].'" class="toolTip glyphicon glyphicon-question-sign"></div>
+                        <div data-toggle="tooltip" title="'.$config_groups['alert.transports.pushbullet']['config_descr'].'" class="toolTip fa fa-question-circle"></div>
                         <div class="col-sm-4">
                             <input id="pushbullet" class="form-control" type="text" name="global-config-input" value="'.$config_groups['alert.transports.pushbullet']['config_value'].'" data-config_id="'.$config_groups['alert.transports.pushbullet']['config_id'].'">
-                            <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                            <span class="form-control-feedback">
+    <i class="fa" aria-hidden="true"></i>
+</span>
                         </div>
                     </div>
                 </div>
@@ -736,10 +780,12 @@ echo '<div id="boxcar_appkey_template" class="hide">
                 <div class="panel-body">
                     <div class="form-group has-feedback">
                         <label for="victorops" class="col-sm-4 control-label">Post URL </label>
-                        <div data-toggle="tooltip" title="'.$config_groups['alert.transports.victorops.url']['config_descr'].'" class="toolTip glyphicon glyphicon-question-sign"></div>
+                        <div data-toggle="tooltip" title="'.$config_groups['alert.transports.victorops.url']['config_descr'].'" class="toolTip fa fa-question-circle"></div>
                         <div class="col-sm-4">
                             <input id="victorops" class="form-control" type="text" name="global-config-input" value="'.$config_groups['alert.transports.victorops.url']['config_value'].'" data-config_id="'.$config_groups['alert.transports.victorops.url']['config_id'].'">
-                            <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                            <span class="form-control-feedback">
+    <i class="fa" aria-hidden="true"></i>
+</span>
                         </div>
                     </div>
                 </div>
@@ -767,14 +813,18 @@ echo '
                         <label for="clickatell_token" class="col-sm-4 control-label">Clickatell Token </label>
                         <div class="col-sm-4">
                             <input id="clickatell_token" class="form-control" type="text" name="global-config-input" value="'.$clickatell['config_value'].'" data-config_id="'.$clickatell['config_id'].'">
-                            <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                            <span class="form-control-feedback">
+    <i class="fa" aria-hidden="true"></i>
+</span>
                         </div>
                     </div>
                     <div class="form-group has-feedback">
                         <label for="clickatell_to" class="col-sm-4 control-label">Mobile numbers</label>
                         <div class="col-sm-4">
                             <textarea class="form-control" name="global-config-textarea" id="clickatell_to" placeholder="Enter the config options" data-config_id="'.$clickatell['config_id'].'" data-type="clickatell">'.$upd_mobiles.'</textarea>
-                            <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                            <span class="form-control-feedback">
+    <i class="fa" aria-hidden="true"></i>
+</span>
                         </div>
                     </div>
                 </div>
@@ -803,35 +853,45 @@ echo '
                         <label for="playsms_url" class="col-sm-4 control-label">PlaySMS URL </label>
                         <div class="col-sm-4">
                             <input id="playsms_url" class="form-control" type="text" name="global-config-input" value="'.$playsms_url['config_value'].'" data-config_id="'.$playsms_url['config_id'].'">
-                            <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                            <span class="form-control-feedback">
+    <i class="fa" aria-hidden="true"></i>
+</span>
                         </div>
                     </div>
                     <div class="form-group has-feedback">
                         <label for="playsms_user" class="col-sm-4 control-label">User</label>
                         <div class="col-sm-4">
                             <input id="playsms_user" class="form-control" type="text" name="global-config-input" value="'.$playsms_user['config_value'].'" data-config_id="'.$playsms_user['config_id'].'">
-                            <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                            <span class="form-control-feedback">
+    <i class="fa" aria-hidden="true"></i>
+</span>
                         </div>
                     </div>
                     <div class="form-group has-feedback">
                         <label for="playsms_token" class="col-sm-4 control-label">Token</label>
                         <div class="col-sm-4">
                             <input id="playsms_token" class="form-control" type="text" name="global-config-input" value="'.$playsms_token['config_value'].'" data-config_id="'.$playsms_token['config_id'].'">
-                            <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                            <span class="form-control-feedback">
+    <i class="fa" aria-hidden="true"></i>
+</span>
                         </div>
                     </div>
                     <div class="form-group has-feedback">
                         <label for="playsms_from" class="col-sm-4 control-label">From</label>
                         <div class="col-sm-4">
                             <input id="playsms_from" class="form-control" type="text" name="global-config-input" value="'.$playsms_from['config_value'].'" data-config_id="'.$playsms_from['config_id'].'">
-                            <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                            <span class="form-control-feedback">
+    <i class="fa" aria-hidden="true"></i>
+</span>
                         </div>
                     </div>
                     <div class="form-group has-feedback">
                         <label for="clickatell_to" class="col-sm-4 control-label">Mobiles</label>
                         <div class="col-sm-4">
                             <textarea class="form-control" name="global-config-textarea" id="playsms_to" placeholder="Enter the config options" data-config_id="'.$playsms_url['config_id'].'" data-type="playsms">'.$upd_mobiles.'</textarea>
-                            <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                            <span class="form-control-feedback">
+    <i class="fa" aria-hidden="true"></i>
+</span>
                         </div>
                     </div>
                 </div>
@@ -855,35 +915,45 @@ echo '
                         <label for="canopsis_host" class="col-sm-4 control-label">Canopsis Hostname </label>
                         <div class="col-sm-4">
                             <input id="canopsis_host" class="form-control" type="text" name="global-config-input" value="'.$canopsis_host['config_value'].'" data-config_id="'.$canopsis_host['config_id'].'">
-                            <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                            <span class="form-control-feedback">
+    <i class="fa" aria-hidden="true"></i>
+</span>
                         </div>
                     </div>
                     <div class="form-group has-feedback">
                         <label for="canopsis_port" class="col-sm-4 control-label">Canopsis Port number </label>
                         <div class="col-sm-4">
                             <input id="canopsis_port" class="form-control" type="text" name="global-config-input" value="'.$canopsis_port['config_value'].'" data-config_id="'.$canopsis_port['config_id'].'">
-                            <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                            <span class="form-control-feedback">
+    <i class="fa" aria-hidden="true"></i>
+</span>
                         </div>
                     </div>
                     <div class="form-group has-feedback">
                         <label for="canopsis_user" class="col-sm-4 control-label">User</label>
                         <div class="col-sm-4">
                             <input id="canopsis_user" class="form-control" type="text" name="global-config-input" value="'.$canopsis_user['config_value'].'" data-config_id="'.$canopsis_user['config_id'].'">
-                            <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                            <span class="form-control-feedback">
+    <i class="fa" aria-hidden="true"></i>
+</span>
                         </div>
                     </div>
                     <div class="form-group has-feedback">
                         <label for="canopsis_passwd" class="col-sm-4 control-label">Password</label>
                         <div class="col-sm-4">
                             <input id="canopsis_passwd" class="form-control" type="password" name="global-config-input" value="'.$canopsis_passwd['config_value'].'" data-config_id="'.$canopsis_passwd['config_id'].'">
-                            <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                            <span class="form-control-feedback">
+    <i class="fa" aria-hidden="true"></i>
+</span>
                         </div>
                     </div>
                     <div class="form-group has-feedback">
                         <label for="canopsis_vhost" class="col-sm-4 control-label">Vhost</label>
                         <div class="col-sm-4">
                             <input id="canopsis_vhost" class="form-control" type="text" name="global-config-input" value="'.$canopsis_vhost['config_value'].'" data-config_id="'.$canopsis_vhost['config_id'].'">
-                            <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
+                            <span class="form-control-feedback">
+    <i class="fa" aria-hidden="true"></i>
+</span>
                         </div>
                     </div>
                 </div>
@@ -1242,17 +1312,17 @@ echo '
             success: function (data) {
                 if (data.status == 'ok') {
                     $this.closest('.form-group').addClass('has-success');
-                    $this.next().addClass('glyphicon-ok');
+                    $this.next().addClass('fa-check');
                     setTimeout(function(){
                         $this.closest('.form-group').removeClass('has-success');
-                        $this.next().removeClass('glyphicon-ok');
+                        $this.next().removeClass('fa-check');
                     }, 2000);
                 } else {
                     $(this).closest('.form-group').addClass('has-error');
-                    $this.next().addClass('glyphicon-remove');
+                    $this.next().addClass('fa-times');
                     setTimeout(function(){
                         $this.closest('.form-group').removeClass('has-error');
-                        $this.next().removeClass('glyphicon-remove');
+                        $this.next().removeClass('fa-times');
                     }, 2000);
                 }
             },
@@ -1275,17 +1345,17 @@ echo '
             success: function (data) {
                 if (data.status == 'ok') {
                     $this.closest('.form-group').addClass('has-success');
-                    $this.next().addClass('glyphicon-ok');
+                    $this.next().addClass('fa-check');
                     setTimeout(function(){
                         $this.closest('.form-group').removeClass('has-success');
-                        $this.next().removeClass('glyphicon-ok');
+                        $this.next().removeClass('fa-check');
                     }, 2000);
                 } else {
                     $(this).closest('.form-group').addClass('has-error');
-                    $this.next().addClass('glyphicon-remove');
+                    $this.next().addClass('fa-times');
                     setTimeout(function(){
                         $this.closest('.form-group').removeClass('has-error');
-                        $this.next().removeClass('glyphicon-remove');
+                        $this.next().removeClass('fa-times');
                     }, 2000);
                 }
             },

From ac2b8786071f6f42ec128291a7f945af324354ee Mon Sep 17 00:00:00 2001
From: Bennett Blodinger <bennett.blodinger@gmail.com>
Date: Thu, 22 Sep 2016 10:47:25 -0400
Subject: [PATCH 3/7] font-awesome datetimepicker

Forces jquery-datetimepicker to use font-awesome icons
---
 html/includes/modal/alert_schedule.inc.php | 27 +++++++++++++++--
 html/includes/print-date-selector.inc.php  |  4 +--
 html/pages/device/performance.inc.php      | 34 ++++++++++++++++++++--
 html/pages/syslog.inc.php                  | 28 ++++++++++++++++--
 4 files changed, 85 insertions(+), 8 deletions(-)

diff --git a/html/includes/modal/alert_schedule.inc.php b/html/includes/modal/alert_schedule.inc.php
index 48e3620e0f..27df26ac20 100644
--- a/html/includes/modal/alert_schedule.inc.php
+++ b/html/includes/modal/alert_schedule.inc.php
@@ -207,9 +207,32 @@ $('#map-stub').typeahead({
 
 $(function () {
     $("#start").datetimepicker({
-        minDate: '<?php echo date($config['dateformat']['byminute']); ?>'
+        minDate: '<?php echo date($config['dateformat']['byminute']); ?>',
+        icons: {
+            time: 'fa fa-clock-o',
+            date: 'fa fa-calendar',
+            up: 'fa fa-chevron-up',
+            down: 'fa fa-chevron-down',
+            previous: 'fa fa-chevron-left',
+            next: 'fa fa-chevron-right',
+            today: 'fa fa-calendar-check-o',
+            clear: 'fa fa-trash-o',
+            close: 'fa fa-close'
+        }
+    });
+    $("#end").datetimepicker({
+        icons: {
+            time: 'fa fa-clock-o',
+            date: 'fa fa-calendar',
+            up: 'fa fa-chevron-up',
+            down: 'fa fa-chevron-down',
+            previous: 'fa fa-chevron-left',
+            next: 'fa fa-chevron-right',
+            today: 'fa fa-calendar-check-o',
+            clear: 'fa fa-trash-o',
+            close: 'fa fa-close'
+        }
     });
-    $("#end").datetimepicker();
     $("#start").on("dp.change", function (e) {
         $("#end").data("DateTimePicker").minDate(e.date);
     });
diff --git a/html/includes/print-date-selector.inc.php b/html/includes/print-date-selector.inc.php
index 3333df0b6d..f7055b3a48 100644
--- a/html/includes/print-date-selector.inc.php
+++ b/html/includes/print-date-selector.inc.php
@@ -33,8 +33,8 @@ echo '
             ("0"+strto.getHours()).slice(-2)+":"+
             ("0"+strto.getMinutes()).slice(-2)
         );
-        $("#dtpickerfrom").datetimepicker({useCurrent: true, sideBySide: true, useStrict: false});
-        $("#dtpickerto").datetimepicker({useCurrent: true, sideBySide: true, useStrict: false});
+        $("#dtpickerfrom").datetimepicker({useCurrent: true, sideBySide: true, useStrict: false, icons: {time: "fa fa-clock-o", date: "fa fa-calendar", up: "fa fa-chevron-up", down: "fa fa-chevron-down", previous: "fa fa-chevron-left", next: "fa fa-chevron-right", today: "fa fa-calendar-check-o", clear: "fa fa-trash-o", close: "fa fa-close"}});
+        $("#dtpickerto").datetimepicker({useCurrent: true, sideBySide: true, useStrict: false, icons: {time: "fa fa-clock-o", date: "fa fa-calendar", up: "fa fa-chevron-up", down: "fa fa-chevron-down", previous: "fa fa-chevron-left", next: "fa fa-chevron-right", today: "fa fa-calendar-check-o", clear: "fa fa-trash-o", close: "fa fa-close"}});
 });
     </script></center>
 ';
diff --git a/html/pages/device/performance.inc.php b/html/pages/device/performance.inc.php
index 4557655618..332f481afd 100644
--- a/html/pages/device/performance.inc.php
+++ b/html/pages/device/performance.inc.php
@@ -51,8 +51,38 @@ if (empty($vars['dtpickerto'])) {
 <hr />
 <script type="text/javascript">
     $(function () {
-        $("#dtpickerfrom").datetimepicker({useCurrent: true, sideBySide: true, useStrict: false});
-        $("#dtpickerto").datetimepicker({useCurrent: true, sideBySide: true, useStrict: false});
+        $("#dtpickerfrom").datetimepicker({
+            useCurrent: true,
+            sideBySide: true,
+            useStrict: false,
+            icons: {
+                time: 'fa fa-clock-o',
+                date: 'fa fa-calendar',
+                up: 'fa fa-chevron-up',
+                down: 'fa fa-chevron-down',
+                previous: 'fa fa-chevron-left',
+                next: 'fa fa-chevron-right',
+                today: 'fa fa-calendar-check-o',
+                clear: 'fa fa-trash-o',
+                close: 'fa fa-close'
+            }
+        });
+        $("#dtpickerto").datetimepicker({
+            useCurrent: true,
+            sideBySide: true,
+            useStrict: false,
+            icons: {
+                time: 'fa fa-clock-o',
+                date: 'fa fa-calendar',
+                up: 'fa fa-chevron-up',
+                down: 'fa fa-chevron-down',
+                previous: 'fa fa-chevron-left',
+                next: 'fa fa-chevron-right',
+                today: 'fa fa-calendar-check-o',
+                clear: 'fa fa-trash-o',
+                close: 'fa fa-close'
+            }
+        });
     });
 </script>
 
diff --git a/html/pages/syslog.inc.php b/html/pages/syslog.inc.php
index 482dd48c8d..a2118a28c9 100644
--- a/html/pages/syslog.inc.php
+++ b/html/pages/syslog.inc.php
@@ -87,11 +87,35 @@ print_optionbar_start();
 
 <script>
 $(function () {
-    $("#dtpickerfrom").datetimepicker();
+    $("#dtpickerfrom").datetimepicker({
+        icons: {
+            time: 'fa fa-clock-o',
+            date: 'fa fa-calendar',
+            up: 'fa fa-chevron-up',
+            down: 'fa fa-chevron-down',
+            previous: 'fa fa-chevron-left',
+            next: 'fa fa-chevron-right',
+            today: 'fa fa-calendar-check-o',
+            clear: 'fa fa-trash-o',
+            close: 'fa fa-close'
+        }
+    });
     $("#dtpickerfrom").on("dp.change", function (e) {
         $("#dtpickerto").data("DateTimePicker").minDate(e.date);
     });
-    $("#dtpickerto").datetimepicker();
+    $("#dtpickerto").datetimepicker({
+        icons: {
+            time: 'fa fa-clock-o',
+            date: 'fa fa-calendar',
+            up: 'fa fa-chevron-up',
+            down: 'fa fa-chevron-down',
+            previous: 'fa fa-chevron-left',
+            next: 'fa fa-chevron-right',
+            today: 'fa fa-calendar-check-o',
+            clear: 'fa fa-trash-o',
+            close: 'fa fa-close'
+        }
+    });
     $("#dtpickerto").on("dp.change", function (e) {
         $("#dtpickerfrom").data("DateTimePicker").maxDate(e.date);
     });

From 309beadf10f50eb4cc41371183ebdcffef89842d Mon Sep 17 00:00:00 2001
From: Bennett Blodinger <bennett.blodinger@gmail.com>
Date: Thu, 22 Sep 2016 13:43:03 -0400
Subject: [PATCH 4/7] fix $glyph_

---
 html/includes/table/alertlog.inc.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/html/includes/table/alertlog.inc.php b/html/includes/table/alertlog.inc.php
index 9d0fc1d0a0..cfc80b16b5 100644
--- a/html/includes/table/alertlog.inc.php
+++ b/html/includes/table/alertlog.inc.php
@@ -78,7 +78,7 @@ foreach (dbFetchRows($sql, $param) as $alertlog) {
         'details'     => '<a class="fa fa-plus incident-toggle" style="display:none" data-toggle="collapse" data-target="#incident'.($rulei).'" data-parent="#alerts"></a>',
         'hostname'    => '<div class="incident">'.generate_device_link($dev, shorthost($dev['hostname'])).'<div id="incident'.($rulei).'" class="collapse">'.$fault_detail.'</div></div>',
         'alert'       => htmlspecialchars($alertlog['alert']),
-        'status'      => "<b><i class='fa fa-".$glyph_icon." text-".$glyph_color."'></i> $text</b>",
+        'status'      => "<b><i class='fa fa-".$fa_icon." text-".$fa_color."'></i> $text</b>",
     );
 }//end foreach
 

From c60d95b015fec18e11ec4721bc035b49c8db148e Mon Sep 17 00:00:00 2001
From: Bennett Blodinger <bennett.blodinger@gmail.com>
Date: Thu, 22 Sep 2016 13:43:12 -0400
Subject: [PATCH 5/7] close <i>

---
 html/includes/print-alert-templates.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/html/includes/print-alert-templates.php b/html/includes/print-alert-templates.php
index 0541291e5b..35f0fe6241 100644
--- a/html/includes/print-alert-templates.php
+++ b/html/includes/print-alert-templates.php
@@ -82,7 +82,7 @@ foreach (dbFetchRows($full_query, $param) as $template) {
         echo "<div class='btn-group btn-group-sm' role='group'>";
         echo "<button type='button' class='btn btn-primary btn-sm' data-toggle='modal' data-target='#alert-template' data-template_id='".$template['id']."' data-template_action='edit' name='edit-alert-template'><i class='fa fa-lg fa-pencil' aria-hidden='true'></i></button> ";
         echo "<button type='button' class='btn btn-danger btn-sm' data-toggle='modal' data-target='#confirm-delete-alert-template' data-template_id='".$template['id']."' name='delete-alert-template'><i class='fa fa-lg fa-trash' aria-hidden='true'></i></button> ";
-        echo "<button type='button' class='btn btn-warning btn-sm' data-toggle='modal' data-target='#attach-alert-template' data-template_id='".$template['id']."' name='attach-alert-template'><i class='fa fa-th-list' aria-hidden='true'></span></button>";
+        echo "<button type='button' class='btn btn-warning btn-sm' data-toggle='modal' data-target='#attach-alert-template' data-template_id='".$template['id']."' name='attach-alert-template'><i class='fa fa-th-list' aria-hidden='true'></i></button>";
         echo "</div>";
     }
 

From 4106f0f8c7412a4162f56c27ad0315feb3b23c17 Mon Sep 17 00:00:00 2001
From: Bennett Blodinger <bennett.blodinger@gmail.com>
Date: Thu, 22 Sep 2016 13:44:14 -0400
Subject: [PATCH 6/7] fix tooltip

`container` property documented here:
http://getbootstrap.com/javascript/#callout-tooltip-groups
---
 html/includes/print-alert-rules.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/html/includes/print-alert-rules.php b/html/includes/print-alert-rules.php
index 8b3ee73eb7..650460cb03 100644
--- a/html/includes/print-alert-rules.php
+++ b/html/includes/print-alert-rules.php
@@ -220,8 +220,8 @@ foreach (dbFetchRows($full_query, $param) as $rule) {
     echo '<td>';
     if ($_SESSION['userlevel'] >= '10') {
         echo "<div class='btn-group btn-group-sm' role='group'>";
-        echo "<button type='button' class='btn btn-primary' data-toggle='modal' data-target='#create-alert' data-device_id='".$rule['device_id']."' data-alert_id='".$rule['id']."' name='edit-alert-rule' data-content='".$popover_msg."'><i class='fa fa-lg fa-pencil' aria-hidden='true'></i></button> ";
-        echo "<button type='button' class='btn btn-danger' aria-label='Delete' data-toggle='modal' data-target='#confirm-delete' data-alert_id='".$rule['id']."' name='delete-alert-rule' data-content='".$popover_msg."'><i class='fa fa-lg fa-trash' aria-hidden='true'></i></button>";
+        echo "<button type='button' class='btn btn-primary' data-toggle='modal' data-target='#create-alert' data-device_id='".$rule['device_id']."' data-alert_id='".$rule['id']."' name='edit-alert-rule' data-content='".$popover_msg."' data-container='body'><i class='fa fa-lg fa-pencil' aria-hidden='true'></i></button> ";
+        echo "<button type='button' class='btn btn-danger' aria-label='Delete' data-toggle='modal' data-target='#confirm-delete' data-alert_id='".$rule['id']."' name='delete-alert-rule' data-content='".$popover_msg."' data-container='body'><i class='fa fa-lg fa-trash' aria-hidden='true'></i></button>";
     }
 
     echo '</td>';

From 10de31720d2299c0a61d6973314bc685eb141036 Mon Sep 17 00:00:00 2001
From: Bennett Blodinger <bennett.blodinger@gmail.com>
Date: Thu, 22 Sep 2016 14:45:41 -0400
Subject: [PATCH 7/7] 3x to 2x

---
 html/includes/print-alert-rules.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/html/includes/print-alert-rules.php b/html/includes/print-alert-rules.php
index 650460cb03..accf363ffb 100644
--- a/html/includes/print-alert-rules.php
+++ b/html/includes/print-alert-rules.php
@@ -205,9 +205,9 @@ foreach (dbFetchRows($full_query, $param) as $rule) {
 
     echo '<i>'.htmlentities($rule['rule']).'</i></td>';
     echo '<td>'.$rule['severity'].'</td>';
-    echo "<td><span id='alert-rule-".$rule['id']."' class='fa fa-fw fa-3x fa-".$ico.' text-'.$col."'></span> ";
+    echo "<td><span id='alert-rule-".$rule['id']."' class='fa fa-fw fa-2x fa-".$ico.' text-'.$col."'></span> ";
     if ($rule_extra['mute'] === true) {
-        echo "<i class='fa fa-fw fa-3x fa-volume-off text-primary' aria-hidden='true'></i></td>";
+        echo "<i class='fa fa-fw fa-2x fa-volume-off text-primary' aria-hidden='true'></i></td>";
     }
 
     echo '<td><small>Max: '.$rule_extra['count'].'<br />Delay: '.$rule_extra['delay'].'<br />Interval: '.$rule_extra['interval'].'</small></td>';