Як вставляється значок шрифту у веб-сторінку? [зачинено]

Я б вважав наступний HTML-елемент пустим елементом і не відображає зміст у вікні веб-переглядача:

<p class="sample_class"></p>

Але коли йдеться про додавання іконок до сторінок HTML, таких як наступний зразок коду для додавання значків Font Awesome (з 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>

У вікні браузера відображаються піктограми / символи шрифтів. Чому? Чи не кожен з них <i> </i> елемент порожній?

fonts icons css

— John Smith Sr.
джерело

Вміст, який ви бачите, надходить з CSS. CSS також може додавати вміст, використовуючи :before і :after позначення. Якщо ви подивитеся font-awesome.min.css, ви знайдете такі рядки, хоча не в такому порядку:

.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"
}

Дякую, я не знав, що CSS зміг це зробити.

— John Smith Sr.