Поставить иконки соц. сетей на сайт?

Question

[howuu]

И так я скачал пак иконок для социальных сетей
из него мне нужны телеграм, инстаграм, фейсбук и ютуб.
В архиве был файл psd при открытии, которого мы видим все иконки, которые есть в этом паке
в другой папке вот такие белые png файлы.
Как эти png файлы установить на сайте правильно, что бы они были такими как в psd файле? Что мне нужно сделать? Я находил другие паки где сразу идут цветные png картинки, но там нет телеграма, если скачивать их отдельно каждую, то они получаются разного стиля, размера и вообще это отстойно, как сделать это правильно?

Answer 1

[WapSter]

Со шрифтовыми иконками. А в чем проблема вставить иконки png просто на сайт?
Вырезаешь отдельные элементы и вставляешь как обычные картинки

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

но в таком случае лучше использовать спрайты

Answer 2

[FeST1VaL]

Еще как вариант вы можете найти иконки в svg и поставить их...

Тут несколько вариантов...

Например через backgroud:

Т.е верстка примерно такая...

<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>

И в стилях задаете размеры для класса social__icon тк он общий для всех иконок и добавляете для разных классов т.е social__facebook иконку facebook зашифрованную в base64 или просто файл

Т.е это будет выглядеть примерно так...
P.S я сократил закодированную иконку, чтобы не было полотна текста...
Иконки в svg можно взять на этом сайте, а перевести в base64 на этом сайте

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

Answer 3

[Johny Sins]

Используйте CSS спрайты.
https://learn.javascript.ru/css-sprite

Answer 4

[MasterMike]

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

Answer 5

[Нерон Лордов]

из него мне нужны телеграм, инстаграм, фейсбук и ютуб

Гугл-картинки - серьезно. Никто не осудит, если из гугла ты дёрнешь иконки соц-сетей. И это в миллиард раз проще. Но это только насчёт иконок соцсетей.