Я не сторонница использования сторонних библиотек по типу font awesome, так как не раз сталкивалась с проблемой совместимости с разными версиями браузеров, а также банальными сбоями подключения или шрифтов. Поэтому считаю, что иконки для соцсетей надо подключать отдельно. Собственно на чистом CSS с использованием векторных изображений.
Вот несколько базовых иконок соцсетей:
<ul class="h__social">
<li><a href="#" class="whatsapp"></a></li>
<li><a href="#" class="telegram"></a></li>
<li><a href="#" class="vk"></a></li>
<li><a href="#" class="youtube"></a></li>
<li><a href="#" class="ok"></a></li>
<li><a href="#" class="zen"></a></li>
<li><a href="#" class="rss"></a></li>
</ul>
Ну и SCSS код к ним:
@charset "UTF-8";
.h__social{
margin-top: 6px;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
align-items: center;
-ms-flex-align: center;
flex-wrap: wrap;
list-style: none;
-ms-flex-pack: start;
justify-content: flex-start;
}
.h__social li{
margin: 0 3px;
}
.h__social a{
display: block;
height: 25px;
width: 25px;
line-height: 1;
}
/*
Использован стандартный конвертер SVG to Base 64.
Иконки установлены в прозрачный квадрат 30х30px с закруглением углов в 4px.
При hover зливка квадрата fill меняется на заданную
*/
.instagram {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg transform='translate(731 8910)'%3E%3Crect width='30' height='30' rx='4' transform='translate(-731 -8910)' fill='none'/%3E%3Cg transform='translate(-13.998 42)'%3E%3Crect width='22' height='22' transform='translate(-713.001 -8948)' fill='none'/%3E%3Cpath d='M10.781,7.49a5.528,5.528,0,1,0,5.528,5.528A5.519,5.519,0,0,0,10.781,7.49Zm0,9.122a3.594,3.594,0,1,1,3.594-3.594,3.6,3.6,0,0,1-3.594,3.594Zm7.044-9.348a1.289,1.289,0,1,1-1.289-1.289A1.286,1.286,0,0,1,17.824,7.264Zm3.661,1.309a6.381,6.381,0,0,0-1.742-4.518,6.423,6.423,0,0,0-4.518-1.742c-1.78-.1-7.116-.1-8.9,0A6.414,6.414,0,0,0,1.812,4.05,6.4,6.4,0,0,0,.071,8.568c-.1,1.78-.1,7.116,0,8.9a6.381,6.381,0,0,0,1.742,4.518A6.431,6.431,0,0,0,6.33,23.724c1.78.1,7.116.1,8.9,0a6.381,6.381,0,0,0,4.518-1.742,6.423,6.423,0,0,0,1.742-4.518c.1-1.78.1-7.111,0-8.891Zm-2.3,10.8a3.639,3.639,0,0,1-2.05,2.05c-1.419.563-4.787.433-6.356.433s-4.941.125-6.356-.433a3.639,3.639,0,0,1-2.05-2.05c-.563-1.419-.433-4.787-.433-6.356s-.125-4.941.433-6.356a3.639,3.639,0,0,1,2.05-2.05c1.419-.563,4.787-.433,6.356-.433s4.941-.125,6.356.433a3.639,3.639,0,0,1,2.05,2.05c.563,1.419.433,4.787.433,6.356S19.749,17.96,19.186,19.375Z' transform='translate(-712.997 -8950.237)' fill='%23000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
transition: all .1s ease-in-out; }
.instagram:hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg transform='translate(731 8910)'%3E%3Crect width='30' height='30' rx='4' transform='translate(-731 -8910)' fill='%233f729b'/%3E%3Cg transform='translate(-13.998 42)'%3E%3Crect width='22' height='22' transform='translate(-713.001 -8948)' fill='none'/%3E%3Cpath d='M10.781,7.49a5.528,5.528,0,1,0,5.528,5.528A5.519,5.519,0,0,0,10.781,7.49Zm0,9.122a3.594,3.594,0,1,1,3.594-3.594,3.6,3.6,0,0,1-3.594,3.594Zm7.044-9.348a1.289,1.289,0,1,1-1.289-1.289A1.286,1.286,0,0,1,17.824,7.264Zm3.661,1.309a6.381,6.381,0,0,0-1.742-4.518,6.423,6.423,0,0,0-4.518-1.742c-1.78-.1-7.116-.1-8.9,0A6.414,6.414,0,0,0,1.812,4.05,6.4,6.4,0,0,0,.071,8.568c-.1,1.78-.1,7.116,0,8.9a6.381,6.381,0,0,0,1.742,4.518A6.431,6.431,0,0,0,6.33,23.724c1.78.1,7.116.1,8.9,0a6.381,6.381,0,0,0,4.518-1.742,6.423,6.423,0,0,0,1.742-4.518c.1-1.78.1-7.111,0-8.891Zm-2.3,10.8a3.639,3.639,0,0,1-2.05,2.05c-1.419.563-4.787.433-6.356.433s-4.941.125-6.356-.433a3.639,3.639,0,0,1-2.05-2.05c-.563-1.419-.433-4.787-.433-6.356s-.125-4.941.433-6.356a3.639,3.639,0,0,1,2.05-2.05c1.419-.563,4.787-.433,6.356-.433s4.941-.125,6.356.433a3.639,3.639,0,0,1,2.05,2.05c.563,1.419.433,4.787.433,6.356S19.749,17.96,19.186,19.375Z' transform='translate(-712.997 -8950.237)' fill='%23fff'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.vk {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg transform='translate(590 8910)'%3E%3Crect width='30' height='30' rx='4' transform='translate(-590 -8910)' fill='none'/%3E%3Cpath d='M24.762,7.717c.165-.557,0-.967-.793-.967H21.344a1.127,1.127,0,0,0-1.141.744,21.989,21.989,0,0,1-3.226,5.369c-.61.61-.891.806-1.225.806-.165,0-.419-.2-.419-.753v-5.2c0-.668-.187-.967-.74-.967H10.468a.633.633,0,0,0-.668.6c0,.633.945.78,1.043,2.562v3.867c0,.847-.151,1-.486,1-.891,0-3.057-3.27-4.34-7.013C5.759,7.044,5.5,6.75,4.832,6.75H2.208c-.749,0-.9.352-.9.744,0,.7.891,4.148,4.148,8.711,2.17,3.114,5.226,4.8,8.007,4.8,1.671,0,1.876-.374,1.876-1.02,0-2.976-.151-3.257.686-3.257.388,0,1.056.2,2.615,1.7,1.782,1.782,2.076,2.58,3.074,2.58h2.624c.749,0,1.127-.374.909-1.114-.5-1.555-3.872-4.754-4.023-4.968-.388-.5-.276-.722,0-1.167,0,0,3.208-4.513,3.538-6.042Z' transform='translate(-588.308 -8908.879)' fill='%23000'/%3E%3C/g%3E%3C/svg%3E");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
transition: all .1s ease-in-out; }
.vk:hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg transform='translate(590 8910)'%3E%3Crect width='30' height='30' rx='4' transform='translate(-590 -8910)' fill='%232b587a'/%3E%3Cpath d='M24.762,7.717c.165-.557,0-.967-.793-.967H21.344a1.127,1.127,0,0,0-1.141.744,21.989,21.989,0,0,1-3.226,5.369c-.61.61-.891.806-1.225.806-.165,0-.419-.2-.419-.753v-5.2c0-.668-.187-.967-.74-.967H10.468a.633.633,0,0,0-.668.6c0,.633.945.78,1.043,2.562v3.867c0,.847-.151,1-.486,1-.891,0-3.057-3.27-4.34-7.013C5.759,7.044,5.5,6.75,4.832,6.75H2.208c-.749,0-.9.352-.9.744,0,.7.891,4.148,4.148,8.711,2.17,3.114,5.226,4.8,8.007,4.8,1.671,0,1.876-.374,1.876-1.02,0-2.976-.151-3.257.686-3.257.388,0,1.056.2,2.615,1.7,1.782,1.782,2.076,2.58,3.074,2.58h2.624c.749,0,1.127-.374.909-1.114-.5-1.555-3.872-4.754-4.023-4.968-.388-.5-.276-.722,0-1.167,0,0,3.208-4.513,3.538-6.042Z' transform='translate(-588.308 -8908.879)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E"); }
.youtube {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg transform='translate(695 8910)'%3E%3Crect width='30' height='30' rx='4' transform='translate(-695 -8910)' fill='none'/%3E%3Cg transform='translate(-6 42)'%3E%3Crect width='22' height='22' transform='translate(-685 -8948)' fill='none'/%3E%3Cpath d='M22.164,6.872a2.71,2.71,0,0,0-1.907-1.919C18.576,4.5,11.832,4.5,11.832,4.5s-6.743,0-8.425.454A2.71,2.71,0,0,0,1.5,6.872,28.425,28.425,0,0,0,1.05,12.1,28.425,28.425,0,0,0,1.5,17.321a2.669,2.669,0,0,0,1.907,1.888c1.682.454,8.425.454,8.425.454s6.743,0,8.425-.454a2.669,2.669,0,0,0,1.907-1.888,28.425,28.425,0,0,0,.451-5.224A28.425,28.425,0,0,0,22.164,6.872ZM9.627,15.3V8.89L15.263,12.1,9.627,15.3Z' transform='translate(-686.05 -8949.3)' fill='%23000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
transition: all .1s ease-in-out; }
.youtube:hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg transform='translate(695 8910)'%3E%3Crect width='30' height='30' rx='4' transform='translate(-695 -8910)' fill='%23c4302b'/%3E%3Cg transform='translate(-6 42)'%3E%3Crect width='22' height='22' transform='translate(-685 -8948)' fill='none'/%3E%3Cpath d='M22.164,6.872a2.71,2.71,0,0,0-1.907-1.919C18.576,4.5,11.832,4.5,11.832,4.5s-6.743,0-8.425.454A2.71,2.71,0,0,0,1.5,6.872,28.425,28.425,0,0,0,1.05,12.1,28.425,28.425,0,0,0,1.5,17.321a2.669,2.669,0,0,0,1.907,1.888c1.682.454,8.425.454,8.425.454s6.743,0,8.425-.454a2.669,2.669,0,0,0,1.907-1.888,28.425,28.425,0,0,0,.451-5.224A28.425,28.425,0,0,0,22.164,6.872ZM9.627,15.3V8.89L15.263,12.1,9.627,15.3Z' transform='translate(-686.05 -8949.3)' fill='%23fff'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.twitter {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg transform='translate(625 8910)'%3E%3Crect width='30' height='30' rx='4' transform='translate(-625 -8910)' fill='none'/%3E%3Cg transform='translate(9.134 42)'%3E%3Crect width='22' height='22' transform='translate(-630.134 -8948)' fill='none'/%3E%3Cpath d='M19.6,7.8c.014.194.014.388.014.582A12.649,12.649,0,0,1,6.874,21.12,12.65,12.65,0,0,1,0,19.111a9.261,9.261,0,0,0,1.081.055,8.965,8.965,0,0,0,5.557-1.912,4.484,4.484,0,0,1-4.185-3.1,5.645,5.645,0,0,0,.845.069,4.734,4.734,0,0,0,1.178-.152A4.477,4.477,0,0,1,.887,9.673V9.617a4.508,4.508,0,0,0,2.023.568A4.483,4.483,0,0,1,1.524,4.2a12.724,12.724,0,0,0,9.23,4.684,5.053,5.053,0,0,1-.111-1.026,4.481,4.481,0,0,1,7.747-3.063,8.813,8.813,0,0,0,2.841-1.081A4.464,4.464,0,0,1,19.264,6.18a8.974,8.974,0,0,0,2.578-.693A9.623,9.623,0,0,1,19.6,7.8Z' transform='translate(-629.975 -8949.315)' fill='%23000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
transition: all .1s ease-in-out; }
.twitter:hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg transform='translate(625 8910)'%3E%3Crect width='30' height='30' rx='4' transform='translate(-625 -8910)' fill='%233f729b'/%3E%3Cg transform='translate(9.134 42)'%3E%3Crect width='22' height='22' transform='translate(-630.134 -8948)' fill='none'/%3E%3Cpath d='M19.6,7.8c.014.194.014.388.014.582A12.649,12.649,0,0,1,6.874,21.12,12.65,12.65,0,0,1,0,19.111a9.261,9.261,0,0,0,1.081.055,8.965,8.965,0,0,0,5.557-1.912,4.484,4.484,0,0,1-4.185-3.1,5.645,5.645,0,0,0,.845.069,4.734,4.734,0,0,0,1.178-.152A4.477,4.477,0,0,1,.887,9.673V9.617a4.508,4.508,0,0,0,2.023.568A4.483,4.483,0,0,1,1.524,4.2a12.724,12.724,0,0,0,9.23,4.684,5.053,5.053,0,0,1-.111-1.026,4.481,4.481,0,0,1,7.747-3.063,8.813,8.813,0,0,0,2.841-1.081A4.464,4.464,0,0,1,19.264,6.18a8.974,8.974,0,0,0,2.578-.693A9.623,9.623,0,0,1,19.6,7.8Z' transform='translate(-629.975 -8949.315)' fill='%23fff'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.rss {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg transform='translate(555 8910)'%3E%3Crect width='30' height='30' rx='4' transform='translate(-555 -8910)' fill='none'/%3E%3Cg transform='translate(24.378 43.278)'%3E%3Crect width='19' height='19' transform='translate(-574 -8948)' fill='none'/%3E%3Cpath d='M0,16.664a2.465,2.465,0,0,1,.75-1.809,2.465,2.465,0,0,1,1.809-.75,2.465,2.465,0,0,1,1.809.75,2.567,2.567,0,0,1,0,3.627,2.481,2.481,0,0,1-1.809.741,2.465,2.465,0,0,1-1.809-.75A2.465,2.465,0,0,1,0,16.664Zm0-6.446V6.543a12.437,12.437,0,0,1,6.369,1.7A12.61,12.61,0,0,1,11,12.873a12.437,12.437,0,0,1,1.7,6.369H9.006a8.678,8.678,0,0,0-2.636-6.369A8.687,8.687,0,0,0,0,10.218ZM0,3.695V0A18.715,18.715,0,0,1,7.466,1.53,19.419,19.419,0,0,1,13.6,5.638a19.419,19.419,0,0,1,4.108,6.138,18.715,18.715,0,0,1,1.53,7.466H15.548A15.241,15.241,0,0,0,14.317,13.2,15.5,15.5,0,0,0,11,8.236a15.725,15.725,0,0,0-4.965-3.31A15.172,15.172,0,0,0,0,3.695Z' transform='translate(-573.999 -8947.799)' fill='%23000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
transition: all .1s ease-in-out; }
.rss:hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg transform='translate(555 8910)'%3E%3Crect width='30' height='30' rx='4' transform='translate(-555 -8910)' fill='%23ee802f'/%3E%3Cg transform='translate(24.378 43.278)'%3E%3Crect width='19' height='19' transform='translate(-574 -8948)' fill='none'/%3E%3Cpath d='M0,16.664a2.465,2.465,0,0,1,.75-1.809,2.465,2.465,0,0,1,1.809-.75,2.465,2.465,0,0,1,1.809.75,2.567,2.567,0,0,1,0,3.627,2.481,2.481,0,0,1-1.809.741,2.465,2.465,0,0,1-1.809-.75A2.465,2.465,0,0,1,0,16.664Zm0-6.446V6.543a12.437,12.437,0,0,1,6.369,1.7A12.61,12.61,0,0,1,11,12.873a12.437,12.437,0,0,1,1.7,6.369H9.006a8.678,8.678,0,0,0-2.636-6.369A8.687,8.687,0,0,0,0,10.218ZM0,3.695V0A18.715,18.715,0,0,1,7.466,1.53,19.419,19.419,0,0,1,13.6,5.638a19.419,19.419,0,0,1,4.108,6.138,18.715,18.715,0,0,1,1.53,7.466H15.548A15.241,15.241,0,0,0,14.317,13.2,15.5,15.5,0,0,0,11,8.236a15.725,15.725,0,0,0-4.965-3.31A15.172,15.172,0,0,0,0,3.695Z' transform='translate(-573.999 -8947.799)' fill='%23fff'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.ok {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg transform='translate(660 8910)'%3E%3Crect width='30' height='30' rx='4' transform='translate(-660 -8910)' fill='none'/%3E%3Cg transform='translate(2.5 43.436)'%3E%3Crect width='19' height='19' transform='translate(-657 -8947.871)' fill='none'/%3E%3Cpath d='M10.474,12.475a8.231,8.231,0,0,1-3.361,1l.781.769,2.85,2.85c1.042,1.068-.654,2.738-1.707,1.707-.713-.725-1.759-1.77-2.85-2.861L3.337,18.8c-1.053,1.027-2.749-.657-1.7-1.707.725-.725,1.759-1.77,2.85-2.85l.769-.769a8.193,8.193,0,0,1-3.384-1C.659,11.687.125,11.227.6,10.267c.276-.545,1.035-1,2.039-.213a6.059,6.059,0,0,0,3.544,1.079,6.059,6.059,0,0,0,3.544-1.079c1-.788,1.759-.332,2.039.213.463.96-.071,1.419-1.289,2.207ZM1.331,4.844A4.844,4.844,0,1,1,6.176,9.677,4.848,4.848,0,0,1,1.331,4.844Zm2.465,0a2.379,2.379,0,1,0,2.379-2.39A2.383,2.383,0,0,0,3.8,4.844Z' transform='translate(-653.613 -8948)' fill='%23000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
transition: all .1s ease-in-out; }
.ok:hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg transform='translate(660 8910)'%3E%3Crect width='30' height='30' rx='4' transform='translate(-660 -8910)' fill='%23f58220'/%3E%3Cg transform='translate(2.5 43.436)'%3E%3Crect width='19' height='19' transform='translate(-657 -8947.871)' fill='none'/%3E%3Cpath d='M10.474,12.475a8.231,8.231,0,0,1-3.361,1l.781.769,2.85,2.85c1.042,1.068-.654,2.738-1.707,1.707-.713-.725-1.759-1.77-2.85-2.861L3.337,18.8c-1.053,1.027-2.749-.657-1.7-1.707.725-.725,1.759-1.77,2.85-2.85l.769-.769a8.193,8.193,0,0,1-3.384-1C.659,11.687.125,11.227.6,10.267c.276-.545,1.035-1,2.039-.213a6.059,6.059,0,0,0,3.544,1.079,6.059,6.059,0,0,0,3.544-1.079c1-.788,1.759-.332,2.039.213.463.96-.071,1.419-1.289,2.207ZM1.331,4.844A4.844,4.844,0,1,1,6.176,9.677,4.848,4.848,0,0,1,1.331,4.844Zm2.465,0a2.379,2.379,0,1,0,2.379-2.39A2.383,2.383,0,0,0,3.8,4.844Z' transform='translate(-653.613 -8948)' fill='%23fff'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.telegram {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg transform='translate(514 8910)'%3E%3Crect width='30' height='30' rx='4' transform='translate(-514 -8910)' fill='none'/%3E%3Cpath d='M11,.563a11,11,0,1,0,11,11A11,11,0,0,0,11,.563ZM16.4,8.1,14.6,16.606c-.133.6-.492.75-.994.466l-2.75-2.027L9.527,16.322a.694.694,0,0,1-.554.271l.2-2.8,5.1-4.6c.222-.2-.049-.306-.342-.111l-6.3,3.965L4.91,12.2c-.59-.186-.6-.59.124-.874L15.64,7.233c.492-.177.923.12.763.865Z' transform='translate(-510 -8906.563)' fill='%23000'/%3E%3C/g%3E%3C/svg%3E");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
transition: all .1s ease-in-out; }
.telegram:hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg transform='translate(514 8910)'%3E%3Crect width='30' height='30' rx='4' transform='translate(-514 -8910)' fill='%233f729b'/%3E%3Cpath d='M11,.563a11,11,0,1,0,11,11A11,11,0,0,0,11,.563ZM16.4,8.1,14.6,16.606c-.133.6-.492.75-.994.466l-2.75-2.027L9.527,16.322a.694.694,0,0,1-.554.271l.2-2.8,5.1-4.6c.222-.2-.049-.306-.342-.111l-6.3,3.965L4.91,12.2c-.59-.186-.6-.59.124-.874L15.64,7.233c.492-.177.923.12.763.865Z' transform='translate(-510 -8906.563)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E"); }
.zen {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg transform='translate(473 8910)'%3E%3Crect width='30' height='30' rx='4' transform='translate(-473 -8910)' fill='none'/%3E%3Cpath d='M30.67,16c-.055,4.459-.36,6.966-2.032,8.638S24.459,26.615,20,26.67v.659c4.459.055,6.966.36,8.638,2.032S30.615,33.541,30.67,38h.659c.055-4.459.36-6.966,2.032-8.638S37.541,27.385,42,27.33V26.67c-4.459-.055-6.966-.36-8.638-2.032S31.385,20.459,31.33,16Z' transform='translate(-489 -8922)' fill='%23000' fill-rule='evenodd'/%3E%3C/g%3E%3C/svg%3E");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
transition: all .1s ease-in-out; }
.zen:hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg transform='translate(473 8910)'%3E%3Crect width='30' height='30' rx='4' transform='translate(-473 -8910)' fill='%23444444'/%3E%3Cpath d='M30.67,16c-.055,4.459-.36,6.966-2.032,8.638S24.459,26.615,20,26.67v.659c4.459.055,6.966.36,8.638,2.032S30.615,33.541,30.67,38h.659c.055-4.459.36-6.966,2.032-8.638S37.541,27.385,42,27.33V26.67c-4.459-.055-6.966-.36-8.638-2.032S31.385,20.459,31.33,16Z' transform='translate(-489 -8922)' fill='%23fff' fill-rule='evenodd'/%3E%3C/g%3E%3C/svg%3E"); }
.whatsapp {
background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='30' height='30' rx='4' /%3E%3Cg clip-path='url(%23clip0_513_921)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.5656 10.3335C11.362 9.84591 11.2076 9.82737 10.8992 9.81491C10.7942 9.80884 10.6772 9.80277 10.5474 9.80277C10.1461 9.80277 9.7266 9.92007 9.47345 10.1793C9.16502 10.4941 8.39966 11.2286 8.39966 12.7347C8.39966 14.241 9.49806 15.6977 9.64621 15.9016C9.80059 16.1051 11.7877 19.241 14.8732 20.519C17.2861 21.519 18.0021 21.4263 18.5512 21.3091C19.3535 21.1364 20.3593 20.5434 20.6125 19.8276C20.8655 19.1115 20.8655 18.5004 20.7913 18.3708C20.7173 18.2412 20.5135 18.1673 20.2051 18.0128C19.8967 17.8584 18.397 17.1177 18.1131 17.0189C17.8354 16.9141 17.5701 16.9511 17.3604 17.2474C17.0641 17.661 16.7742 18.0809 16.5396 18.3339C16.3546 18.5314 16.052 18.5562 15.799 18.4512C15.4596 18.3094 14.5094 17.9757 13.3368 16.9326C12.4295 16.1241 11.8125 15.1181 11.6337 14.8155C11.4547 14.5069 11.6151 14.3278 11.757 14.1613C11.9114 13.9698 12.0594 13.8341 12.2136 13.655C12.368 13.476 12.4543 13.3834 12.5531 13.1734C12.6581 12.9698 12.5839 12.7598 12.5099 12.6054C12.4358 12.4507 11.8187 10.9445 11.5656 10.3335ZM14.4969 5C8.70843 5 4 9.70974 4 15.4998C4 17.7961 4.74058 19.9257 5.99943 21.6541L4.69103 25.5554L8.72697 24.2655C10.387 25.3643 12.3678 26 14.5031 26C20.2916 26 25 21.2899 25 15.5002C25 9.71007 20.2916 5.00033 14.5031 5.00033H14.497L14.4969 5Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_513_921'%3E%3Crect width='21' height='21' fill='white' transform='translate(4 5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
transition: all .1s ease-in-out;
}
.whatsapp:hover {
background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='30' height='30' rx='4' fill='%2367C15E'/%3E%3Cg clip-path='url(%23clip0_513_921)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.5656 10.3335C11.362 9.84591 11.2076 9.82737 10.8992 9.81491C10.7942 9.80884 10.6772 9.80277 10.5474 9.80277C10.1461 9.80277 9.7266 9.92007 9.47345 10.1793C9.16502 10.4941 8.39966 11.2286 8.39966 12.7347C8.39966 14.241 9.49806 15.6977 9.64621 15.9016C9.80059 16.1051 11.7877 19.241 14.8732 20.519C17.2861 21.519 18.0021 21.4263 18.5512 21.3091C19.3535 21.1364 20.3593 20.5434 20.6125 19.8276C20.8655 19.1115 20.8655 18.5004 20.7913 18.3708C20.7173 18.2412 20.5135 18.1673 20.2051 18.0128C19.8967 17.8584 18.397 17.1177 18.1131 17.0189C17.8354 16.9141 17.5701 16.9511 17.3604 17.2474C17.0641 17.661 16.7742 18.0809 16.5396 18.3339C16.3546 18.5314 16.052 18.5562 15.799 18.4512C15.4596 18.3094 14.5094 17.9757 13.3368 16.9326C12.4295 16.1241 11.8125 15.1181 11.6337 14.8155C11.4547 14.5069 11.6151 14.3278 11.757 14.1613C11.9114 13.9698 12.0594 13.8341 12.2136 13.655C12.368 13.476 12.4543 13.3834 12.5531 13.1734C12.6581 12.9698 12.5839 12.7598 12.5099 12.6054C12.4358 12.4507 11.8187 10.9445 11.5656 10.3335ZM14.4969 5C8.70843 5 4 9.70974 4 15.4998C4 17.7961 4.74058 19.9257 5.99943 21.6541L4.69103 25.5554L8.72697 24.2655C10.387 25.3643 12.3678 26 14.5031 26C20.2916 26 25 21.2899 25 15.5002C25 9.71007 20.2916 5.00033 14.5031 5.00033H14.497L14.4969 5Z' fill='%23FFFFFF'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_513_921'%3E%3Crect width='21' height='21' fill='white' transform='translate(4 5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");}
Естественно цвет иконок можно менять, для этого ищете свойство fill='%23'. Символ "%23" означает "#" в обычной кодировке поэтому его трогать не надо. А вот 000 или fff означает уже черный и белый код цвета соответственно.
Рабочий код "Иконки социальных сетей на CSS и Base64 для вставки на сайт"
Смотреть Pen Glass by VectorDev (@VectorDEV) на CodePen.