How to make icons correctly?

Question

css

There is such a layout (I took it for the sake of practice):

The .psd itself is here: link
The question is how to make up these icons. I'm interested in exactly whether to cut them out as pictures or what. In theory, they are implemented on the layout using the Socialico font , but I could not find it. Cut is also a problem - in Photoshop they are presented as one layer and then just as text. What to do in such a situation?
Also, maybe someone knows where you can read how to make icons correctly when you make up from a .psd layout. And if you need to cut icons as pictures, then how to do :hover effects in this case?
Thanks in advance for your reply.

Answer 1

Instead of Socialico, Font Awesome is great .