Início / coding / Perguntas / 79448366
Accepted
Ivan Debono
Asked: 2025-02-18 21:06:22 +0800 CST

Como usar ícones para elementos li?

  • 772

Usei o Github Copoilot para gerar um componente stepper usando CSS e ele teve um bom começo, mas eu gostaria de mudanças adicionais no CSS. Como sou relativamente novo em CSS, tenho alguns problemas para implementar o seguinte:

  1. Use ícones em vez disso (por exemplo, fa-check-circlepara etapas concluídas e fa-circlepara etapas atuais e futuras
  2. O componente stepper deve se esticar para se ajustar ao seu contêiner pai e não ter comprimento de linha fixo
  3. As etapas concluídas (ícone e linha) devem estar em verde e as etapas atuais e seguintes em cinza

Como posso implementar o acima com pequenas alterações no CSS?

.container {
  width: 100%;
  z-index: -1;
}

.progressbar li {
  list-style-type: none;
  width: 10%;
  float: left;
  font-size: 12px;
  position: relative;
  text-align: center;
  color: #666666;
}

.progressbar li:after {
  width: 100%;
  height: 2px;
  content: '';
  position: absolute;
  background-color: #666666;
  top: 15px;
  left: -50%;
  display: block;
  z-index: -999999;
}

.progressbar li:before {
  width: 30px;
  height: 30px;
  content: '';
  line-height: 30px;
  border: 2px solid #666666;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: white;
  z-index: 999999;
}

.progressbar li:first-child:after {
  content: none;
}

.progressbar li.active {
  color: green;
}

.progressbar li.active:before {
  color: green;
  border-color: green;
}

.progressbar li.active+li:after {
  background-color: #808080;
}
<div class="container">
  <ul class="progressbar">
    <li>Step 1</li>
    <li class="active">Step 2</li>
    <li>Step 3</li>
    <li>Step 4</li>
    <li>Step 5</li>
  </ul>
</div>

html

2 respostas

  1. Best Answer

    insira a descrição da imagem aqui

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
      integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <style>
      .container {
        width: 100%;
        z-index: -1;
      }

      .progressbar li {
        list-style-type: none;
        width: 10%;
        float: left;
        font-size: 12px;
        position: relative;
        text-align: center;
        color: #666666;
      }

      .progressbar li:after {
        width: 100%;
        height: 2px;
        content: "";
        position: absolute;
        background-color: #666666;
        top: 15px;
        left: -50%;
        display: block;
        z-index: -999999;
      }

      .progressbar li:before {
        width: 30px;
        height: 30px;
        content: "";
        line-height: 30px;
        border: 2px solid #666666;
        display: block;
        text-align: center;
        margin: 0 auto 10px auto;
        border-radius: 50%;
        background-color: white;
        z-index: 999999;
      }

      .progressbar li:first-child:after {
        content: none;
      }

      .progressbar li.active {
        color: green;
      }

      .progressbar li.active:before {
        color: green;
        border-color: green;
      }

      .progressbar li.checked::before {
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        content: "\f058";
        color: green;
        font-size: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .progressbar li.active + li:after {
        background-color: #808080;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <ul class="progressbar">
        <li class="checked">Step 1</li>
        <li class="active">Step 2</li>
        <li>Step 3</li>
        <li>Step 4</li>
        <li>Step 5</li>
      </ul>
    </div>
  </body>
</html>

    • 1

  2. Modifiquei meu stepper original com alterações mínimas de CSS para atender aos novos requisitos. Em vez de depender de círculos gerados por CSS com pseudoelementos, agora incluo ícones FontAwesome diretamente no HTML. Para etapas concluídas, uso o ícone fa-check-circle e, para as etapas atuais e futuras, uso fa-circle.

    Para fazer o componente esticar para caber em seu contêiner, troquei o layout de floats para Flexbox. Essa mudança garante que cada passo seja distribuído uniformemente, e as linhas de conexão (ainda implementadas como pseudoelementos) ajustam seu comprimento automaticamente sem serem fixas.

    Também atualizei o estilo de cores para que qualquer etapa marcada como concluída (por meio de uma classe dedicada) exiba o ícone e sua linha de conexão em verde, enquanto as etapas atuais e futuras permanecem em cinza.

    Essa abordagem me permitiu manter a maior parte da minha estrutura original e, ao mesmo tempo, integrar perfeitamente os novos recursos.

    .container {
  width: 100%;
}

.progressbar {
  display: flex;
  padding: 0;
  margin: 20px 0;
  list-style: none;
  position: relative;
}

.progressbar li {
  flex: 1;
  text-align: center;
  position: relative;
  color: #666666;    
}

/*this is to prevent the green connections to show up through the V transparent marking*/
.progressbar li i{
  background: white;
}

.step-icon {
  font-size: 30px;
  display: block;
  margin: 0 auto 10px;
}

.progressbar li::after {
  content: "";
  position: absolute;
  top: 15px;   /*instead of 50% .. since you defined the circle radius as 15px*/
  right: -50%;
  width: 100%;
  height: 2px;
  background-color: #666666;  /* gris por defecto */
  z-index: -1;
}

.progressbar li:last-child::after {
  content: none;
}

.progressbar li.completed,
.progressbar li.completed .step-icon {
  color: green;
}

.progressbar li.completed::after {
  background-color: green;
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<div class="container">
  <ul class="progressbar">
    <li class="completed">
      <i class="fas fa-check-circle step-icon"></i>
      <div>Step 1</div>
    </li>
    <li class="current">
      <i class="fas fa-circle step-icon"></i>
      <div>Step 2</div>
    </li>
    <li>
      <i class="fas fa-circle step-icon"></i>
      <div>Step 3</div>
    </li>
    <li>
      <i class="fas fa-circle step-icon"></i>
      <div>Step 4</div>
    </li>
    <li>
      <i class="fas fa-circle step-icon"></i>
      <div>Step 5</div>
    </li>
  </ul>
</div>

    • 1

relate perguntas