Why use the pseudo class to insert the icons instead of using an img inside the html?

Of course you could do it with an img in the html but Treehouse teaches us to keep styles separate from content (a phone symbol is styling, the phone number is content).

Also, if you put the images in your html, people with screen readers would unnecessarily have to stop just to hear "phone icon" before they hear the actual phone number.

Because all the cool kids do it. :-)

But really there is only one good explanation to it, the image tag will form extra, unneeded tag in your html that might mess with you layout, will need to be styled and so on. Where is ::before or ::after puts the content inside the element specified before the pseudo element in css.

In other words, ::before or ::after generates a content of an element or a tag, and does not creates additional tag like an image tag would, that is why I use it as much as possible.

Best of luck, CSS has been messing with all of us :-)