Adding the Feature Icons I am confused as to how this works Gill use a png image to load some icons separately

In the lesson by Gill he uses a image called feature-icons.png and loads them using css into different divs using some clever css:

ft-icon::before { content: ""; display: block; position: absolute; width: 164px; height: 102px; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: url('../img/feature-icons.png') no-repeat; background-size: 100%; }

but some how rather than the whole image being loaded it only loads one of the icons eg camera or clouds or friends:

how does this work?

HTML:

<div class="ft-icon friends"> </div> </div>

This loads the friends icon but friends is not explicitly defined and why is not the whole image loaded?

Here is the url but i think i have worked it out

https://teamtreehouse.com/library/framework-basics/build-a-website-with-bootstrap/adding-the-feature-icons