Data/hora atual: 15.06.21 20:32

1 Resultado encontrado para fontawesome

Como colocar sistema de status

Altere o código em uso para:
Código:
<style>
  #serverlist div:not([class]) {
  display: flex;
  margin-bottom: 1em;
  }
  #serverlist .col {
  flex: 1;     
  }
  #serverlist .status:after {
  color: white;
  padding: 3px 6px;
  height: 16px;
  font-size: 11px!important;
  text-transform: uppercase;
  }
  #serverlist .status.on:after {content: 'online'; background-color: #4CAF50;}
  #serverlist .status.off:after {content: 'offline'; background-color: #f44336;}
  #serverlist .status.manu:after { content: 'manuteção'; background-color: #e7e7e7; color: black;}
</style>
<div id="serverlist">
  <!--    Servidor 1    -->   
  <div>
      <div class="col">
        Servidor 1   
      </div>
      <div class="col">
        Versão 1   
      </div>
      <div class="col">
        <span class="status off"></span>   
      </div>
  </div>
  <!-- Acaba aqui o Servidor 1 -->
  <!-- Servidor 2 -->
  <div>
      <div class="col">
        Servidor 2
      </div>
      <div class="col">
        Versão 1   
      </div>
      <div class="col">
        <span class="status on"></span>   
      </div>
  </div>
  <!-- Acaba aqui Servidor 2 -->
</div>


tipo um icone antes do servidor 1 por exemplo.

Ícone imagem ou ícone #fontawesome ?
por pedxz
em 23.06.20 18:22
 
Procurar em: Questões resolvidas sobre códigos Javascript e jQuery
Tópico: Como colocar sistema de status
Respostas: 17
Vistos: 531

Voltar ao Topo

Ir para: