Put social icons networks to the site?

Question

PNG

And so I downloaded a pack of icons for social networks
from it I need telegram, instagram, facebook and youtube.
The archive had a psd file when opened, which we see all the icons that are in this pack
in another folder, such white png files.
How to install these png files on the site correctly so that they are the same as in the psd file? What do I need to do? I found other packs where color png images go right away, but there is no telegram there, if you download them separately, they turn out to be of a different style, size, and in general it sucks, how to do it right?

Answer 1

With font icons . And what's the problem with inserting png icons just on the site?
Cut out individual elements and paste as normal pictures

<a href="">
  <img src="" alt="">
</a>

but in this case it is better to use sprites

Answer 2

As another option, you can find icons in svg and put them...
There are several options...
I.e., the layout is something like this...

<div class="social">
  <a href="#" class="social__icon social__facebook"></a>
  <a href="#" class="social__icon social__telegram"></a>
  <a href="#" class="social__icon social__youtube"></a>
</div>

And in the styles, set the dimensions for the social__icon class, since it is common for all icons and add for different classes, i.e. social__facebook the facebook icon encoded in base64 or just a file
. That is, it will look something like this ...
PS I shortened the encoded icon so as not to there was a canvas of text...
Icons in svg can be taken on this site , and converted to base64 on this site

.social__facebook {
   background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4...);
}

Answer 3

Use CSS sprites.
https://learn.javascript.ru/css-sprite

Answer 4

https://tech.yandex.ru/share/

Answer 5

from it I need telegram, instagram, facebook and youtube

Google images, seriously. No one will judge if you pull the icons of social networks from Google. And it's a billion times easier. But this is only about social media icons.