Eu consideraria o seguinte elemento HTML como um elemento vazio e não exibiria conteúdo em uma janela do navegador:
<p class="sample_class"></p>
Mas quando se trata de adicionar ícones a páginas HTML, como o exemplo de código a seguir para adicionar ícones de Fonte Incrível (de W3CSchools.com):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>
</body>
</html>
Na verdade, existem ícones / símbolos de fontes exibidos em uma janela do navegador. Por quê?
Cada um dos elementos <i> </i> não está vazio?
O conteúdo que você vê vem do CSS. O CSS também pode adicionar conteúdo, usando os designadores :before e :after . Se você olhar para font-awesome.min.css , encontrará as seguintes linhas, embora não nesta ordem:
.fa-cloud:before {
content:"\f0c2"
}
.fa-heart:before {
content:"\f004"
}
.fa-automobile:before,.fa-car:before {
content:"\f1b9"
}
.fa-file:before {
content:"\f15b"
}
.fa-navicon:before,.fa-reorder:before,.fa-bars:before {
content:"\f0c9"
}