I would consider the following HTML element as an empty element and displays no content in a browser window:
<p class="sample_class"></p>
But when it comes to adding icons to HTML pages, such as the following sample code for adding Font Awesome icons(From 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>
There are actually font icons/symbols displayed in a browser window. Why?
Isn't every single one of the <i> </i>
element empty?