Icons Console

by Renan Ribeiro Brando

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">


<div class="container m-5">
  <h3>Inspeções</h3>
  <i class="fas fa-robot text-success"></i> - Disponível </br>
  <i class="fas fa-robot text-secondary"></i> - Faltando Resultado</br>
  <i class="fas fa-robot text-pink"></i> - Timeout </br>
  <i class="fas fa-robot text-danger"></i> - Indisponível</br>
  <i class="fas fa-robot text-warning"></i> - Limiar Menor</br>
  <i class="fas fa-robot text-orange"></i> - Limiar Maior</br>
  <i class="fas fa-robot text-purple"></i> - Limiar Maior</br>
</div>

<div class="container m-5">
  <h3>Agentes</h3>
  <i class="fas fa-laptop text-secondary"></i> - Desligado </br>
  <i class="fas fa-laptop text-success"></i> - Ligado </br>
  <i class="fas fa-laptop text-danger"></i> - Desconectado </br>
  <i class="fas fa-laptop text-warning"></i> - Irregular</br>
</div>

<div class="container m-5">
  <h3>Acervo de Agentes</h3>
  <i class="fas fa-server text-secondary"></i> - Desligado </br>
  <i class="fas fa-server text-success"></i> - Ligado </br>
  <i class="fas fa-server text-danger"></i> - Desconectado </br>
  <i class="fas fa-server text-warning"></i> - Irregular</br>
</div>

<div class="container m-5">
  <h3>Grupo Operacional</h3>
  <i class="fas fa-th-large text-secondary"></i> - Desligado </br>
  <i class="fas fa-th-large text-success"></i> - Ligado </br>
  <i class="fas fa-th-large text-danger"></i> - Atrasado </br>
  <i class="fas fa-th-large text-warning"></i> - Irregular</br>
</div>
<div class="container m-5">
  <h3>Grupo de Resultados</h3>
  <i class="fas fa-clipboard-list text-success"></i> - Grupo de Resultados...

CSS

.text-orange{
	color:#ff6600;
}
.text-purple{
	color:#660066;
}
.text-pink{
	color:#ff6699;
}