Fonte incrível

Inclua Font Awesome em seu projeto:
Adicione esta linha ao

Use um ícone

Para usar um ícone, adicione um elemento ou com as classes apropriadas:

Ícones de materiais

Inclua ícones de materiais em seu projeto:
Adicione esta linha ao

Use um ícone

Para usar um ícone, adicione um elemento com a classe material-icons e o nome do ícone:

camera_alt

2. Usando CSS para ícones personalizados

Você também pode criar seus próprios ícones com CSS. Aqui está um exemplo simples usando CSS puro:

Crie uma estrutura HTML básica

Adicione CSS para estilizar seu ícone

.icon-star {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid gold;
    position: relative;
    transform: rotate(35deg);
}


.icon-star:before {
    content: '';
    position: absolute;
    top: 0;
    left: -50px;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid gold;
    transform: rotate(-70deg);
}

Este snippet CSS cria uma forma de estrela simples usando bordas e posicionamento.

3. Ícones SVG

Você também pode usar SVGs para ícones de alta qualidade:

SVG embutido

Usando SVG como imagem de fundo

.icon {
    width: 24px;
    height: 24px;
    background: url('data:image/svg xml;base64,...') no-repeat center center;
    background-size: contain;
}

Pontas

Tamanho e cor: para ícones de fonte e SVGs embutidos, você pode ajustar o tamanho com font-size ou as propriedades de largura e altura e alterar a cor com cor ou preenchimento para SVGs.
Acessibilidade: sempre considere a acessibilidade adicionando texto descritivo ou atributos de ária quando necessário.
Sinta-se à vontade para experimentar e misturar métodos diferentes para descobrir o que funciona melhor para o seu projeto!