Merge pull request #4543 from benwa/font-awesome

webui: Update all glyphicon to font awesome

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\');
         }
       });

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 .= '

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);
     });

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-2x 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-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>';
@@ -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."' 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>';
@@ -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');

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'></i></button>";
+        echo "</div>";
     }
 
     echo '    </td>

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>';

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>
 ';

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;">';
     }
 

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-".$fa_icon." text-".$fa_color."'></i> $text</b>",
     );
 }//end foreach
 

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,

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
 

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();

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');
         }
       });

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>';
 }

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>';
     }

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);
                 }
     });

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);
             }
         });

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>
 

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';

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
     }
 }

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">

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: {

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: {

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: {

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
                         }
                     }

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

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);
                 }
             },

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);
     });

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>');
     }
 }