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;