English
EspañolLista de vantagens com ícones (check) em HTML e CSS
Escreva um item por linha. Para ter título e descrição, separe com |. Escolha o ícone, as cores e as colunas.
Benefícios que se leem de relance
Tudo é feito no seu aparelho: nada é enviado para a internet.
Disponível em: 
Lista de vantagens com ícones (check) em HTML e CSS: para que serve
Transforme a lista de benefícios do seu produto ou serviço numa lista com ícones: check, check no círculo, seta, estrela, coração ou raio, com ou sem bolinha de fundo, em uma ou duas colunas e na cor da marca. Cada item pode ter título e descrição, separados por |.
O ícone vem do CSS, com um pequeno SVG usado como máscara e pintado pela variável --cor-icone, então o HTML continua sendo uma lista comum, que o Google e os leitores de tela entendem, e trocar o ícone de todos os itens é mudar uma linha.
Como usar
- Escreva os itens, um por linha.
- Escolha o ícone, as colunas e a cor.
- Copie o código para o site.
Quando usar
- Seção de benefícios da página inicial.
- Lista do que está incluso num plano.
- Página de venda de serviço.
Perguntas frequentes
Por que o ícone vai pelo CSS?
Porque assim o HTML fica limpo, uma lista comum com li, e o ícone é decoração: o leitor de tela lê só o texto do item, e você troca o ícone de todos os itens mudando uma linha do CSS.
Como funciona o ícone sem imagem?
Cada item tem um ::before com um pequeno SVG usado como máscara (mask-image) e pintado com a cor que você escolheu. Funciona em todos os navegadores atuais e a cor muda pela variável --cor-icone.
Onde usar a lista de vantagens?
Na seção de benefícios da página inicial, na descrição de um serviço, ao lado do preço de um plano e em páginas de venda. Comece cada item pelo resultado para o cliente, não pela característica.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.