I'd love to know more about sprites, why you used the pseudo-class, and how you knew where to position the icons...

Yes, I'm pretty sure you are right with the background-position: X, Y; being the coordinates of where each image in the sprite sheet starts. Notice the sprite sheet used had the images stacked vertically so the X position was always 0 in the background-position: attribute. Only Y changed and it was -105 first then -210 as if moving down the sprite sheet. The width and height of each icon was previously defined in the .ft-icon::before pseudo class, so no matter where the image is set to start rendering from the sprite sheet, it will always be 164 w X 102 h. Something like Photoshop or Illustrator could easily be used to find out these starting coordinates to plug into the background-position.

I've always wondered why pseudo classes are used for this myself. I see it a lot in adding icons to buttons etc. I came across it enough to just accept that maybe it's best practice but never knew why as opposed to say dropping in a span tag in the div and using it instead...