10

Estou desenvolvendo um site a parti de um template pronto, ao inspecionar elemento e verificar qual imagem trocar encontrei o Css da seguinte forma.

.fa-cloud-download:before
{
  content:"\f0ed"
}
  • O que significa esse Css?

  • Como posso saber qual imagem é carregada a parti desse Css?

2 Respostas 2

25

A propriedade content no CSS é para adicionar algum conteúdo, por exemplo:

div::after{
  display:block;
  content:"Hello World";
}
<div></div>

É importante notar que a propriedade content só funciona se usada com os pseudo-elementos :after e :before. Para saber mais sobre pseudo-elementos consulte o W3Schools.

O código \f0ed é um número hexadecimal que representa o endereço de um carácter em uma fonte (que no caso é este carácter). Por exemplo, para adicionar a letra A basta usar o código \0041 que é o seu endereço.

div:before {content:"\0041";}
<div></div>

Para saber o endereço de outros caracteres, basta olhar no Mapa de Caracteres do Windows ou fazer uma rápida pesquisa na internet.

Não é recomendado adicionar caracteres especiais em códigos, como por exemplo nos json ou no nosso caso content do CSS, por isso utilizam-se os seus endereços hexadecimais, por exemplo o simbolo , que não existe no teclado brasileiro, mas pode ser adicionado com um atalho ALT+3.

div:before {content:"\2665";}
<div></div>

Algumas fontes são criadas especialmente para a web, como são os casos das Icon Fonts. Essas fontes de ícones começaram a ser utilizada na web graças a propriedade content, pois poderiam ser referenciadas corretamente no código e poderiam trocar de cor, aumentar e diminuir o tamanho sem perder qualidade, diferente dos sprites (imagens com vários ícones) que pesavam bastante no carregamento das páginas e não eram "flexíveis" como as fontes.

Algumas fontes de ícones bastante utilizadas são:

Entre outras várias na web, basta pesquisar por icon font que encontrará dezenas...

A classe fa-cloud-download pertence a fonte FontAwesome (facilmente identificada pelo prefixo fa-), nela você pode identificar vários ícones, não é recomendado alterar o CSS fornecido por eles, pois quando for atualizar a biblioteca (constantemente são adicionados novos ícones) você perderá sua modificação.

Basta escolher o ícone desejado na "documentação" e alterar a classe no elemento que deseja mudar o ícone.

Atenção: para que o content funcione é necessário especificar de qual fonte é o endereço, por exemplo: font-family: FontAwesome;

1
  • 2
    Uma das melhores respostas do SOpt-Br.
    – Marconi
    Commented 8/10/2015 às 17:20
5

Você esta selecionando o elemento de classe fa-cloud-download, com o pseudo-elemento :before esta dizendo ao navegador que quero fazer algo no início deste elemento, a propriedade content serve para inserir conteúdo dinâmico no HTML. Nesse caso, estou inserindo um elemento de código: \f0ed que seria um icon (ou glyphicon).

Códigos onde pode encontrar mais icons: Link

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .