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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<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>


There are actually font icons/symbols displayed in a browser window. Why? Isn't every single one of the <i> </i> element empty?

closed as off-topic by fixer1234, karel, DavidPostill, nKn, Nifle Jan 10 '17 at 7:20

  • This question does not appear to be about computer software or computer hardware within the scope defined in the help center.
If this question can be reworded to fit the rules in the help center, please edit the question.

locked by Community Jan 10 '17 at 7:20


The contents that you see comes from the CSS. CSS can add contents too, using the :before and :after designators. If you look at font-awesome.min.css, you'll find the following lines, although not in this order:

.fa-cloud:before {
.fa-heart:before {
.fa-automobile:before,.fa-car:before {
.fa-file:before {
.fa-navicon:before,.fa-reorder:before,.fa-bars:before {
  • Thanks, i didn't know CSS was able to do that. – John Smith Jan 7 '17 at 6:14

Not the answer you're looking for? Browse other questions tagged or ask your own question.