1

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?

1 Answer 1

2

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 {
    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"
}
1
  • Thanks, i didn't know CSS was able to do that.
    – user604129
    Jan 7, 2017 at 6:14