Social Media Icons
CODE
×
HTML
<div class='sm-icons'> <div class='instagram-b'></div> <a class='tw-ico'></a> <a class='youtube-ico'></a> <a class='fb-ico'></a> </div>
CSS
@media screen and (max-width: 1119px) { div.sm-icons { height: 32px !important; left:0; padding-left: 30px; padding-right: 30px; overflow:hidden; } } @media screen and (max-width: 767px) { div.sm-icons { padding-left: 20px; padding-right: 20px; } } div.instagram-b { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDYwMCA2MDAiIHZpZXdCb3g9IjAgMCA2MDAgNjAwIj4NCiAgPGNpcmNsZSBjeD0iMzAwIiBjeT0iMzAwIiByPSIyOTcuNSIgZmlsbD0iIzMzMyIgLz4NCiAgPHBhdGggZD0iTTMwMCAxMjMuNWMtNDcuOSAwLTU0IC4yLTcyLjggMS4xLTE4LjguOS0zMS42IDMuOC00Mi44IDguMi0xMS42IDQuNS0yMS41IDEwLjUtMzEuMyAyMC40LTkuOCA5LjgtMTUuOCAxOS43LTIwLjQgMzEuMy00LjQgMTEuMi03LjQgMjQuMS04LjIgNDIuOC0uOCAxOC44LTEuMSAyNC44LTEuMSA3Mi44IDAgNDcuOS4yIDUzLjkgMS4xIDcyLjguOSAxOC44IDMuOCAzMS42IDguMiA0Mi44IDQuNSAxMS42IDEwLjUgMjEuNSAyMC40IDMxLjMgOS44IDkuOCAxOS43IDE1LjkgMzEuMyAyMC40IDExLjIgNC40IDI0LjEgNy4zIDQyLjggOC4yIDE4LjguOSAyNC44IDEuMSA3Mi44IDEuMSA0Ny45IDAgNTMuOS0uMiA3Mi44LTEuMSAxOC44LS45IDMxLjYtMy44IDQyLjktOC4yIDExLjYtNC41IDIxLjQtMTAuNiAzMS4yLTIwLjQgOS44LTkuOCAxNS44LTE5LjcgMjAuNC0zMS4zIDQuMy0xMS4yIDcuMy0yNCA4LjItNDIuOC44LTE4LjggMS4xLTI0LjggMS4xLTcyLjggMC00Ny45LS4yLTUzLjktMS4xLTcyLjgtLjktMTguOC0zLjktMzEuNi04LjItNDIuOC00LjUtMTEuNi0xMC42LTIxLjUtMjAuNC0zMS4zLTkuOC05LjgtMTkuNi0xNS44LTMxLjMtMjAuNC0xMS4zLTQuNC0yNC4xLTcuMy00Mi45LTguMi0xOC44LS45LTI0LjgtMS4xLTcyLjctMS4xem0tMTUuOCAzMS44SDMwMGM0Ny4xIDAgNTIuNy4yIDcxLjMgMSAxNy4yLjggMjYuNSAzLjcgMzIuOCA2LjEgOC4yIDMuMiAxNC4xIDcgMjAuMyAxMy4yIDYuMiA2LjIgMTAgMTIuMSAxMy4yIDIwLjMgMi40IDYuMiA1LjMgMTUuNiA2LjEgMzIuOC44IDE4LjYgMSAyNC4yIDEgNzEuMyAwIDQ3LjEtLjIgNTIuNy0xIDcxLjMtLjggMTcuMi0zLjcgMjYuNS02LjEgMzIuOC0zLjIgOC4yLTcgMTQuMS0xMy4yIDIwLjMtNi4yIDYuMi0xMiAxMC0yMC4zIDEzLjItNi4yIDIuNC0xNS42IDUuMy0zMi44IDYuMS0xOC42LjgtMjQuMiAxLTcxLjMgMS00Ny4xIDAtNTIuNy0uMi03MS4zLTEtMTcuMi0uOC0yNi41LTMuNy0zMi44LTYuMS04LjItMy4yLTE0LjEtNy0yMC4zLTEzLjItNi4yLTYuMi0xMC0xMi4xLTEzLjItMjAuMy0yLjQtNi4yLTUuMy0xNS42LTYuMS0zMi44LS44LTE4LjYtMS0yNC4yLTEtNzEuMyAwLTQ3LjEuMi01Mi43IDEtNzEuMy44LTE3LjIgMy43LTI2LjUgNi4xLTMyLjggMy4yLTguMiA3LTE0LjEgMTMuMi0yMC4zIDYuMi02LjIgMTIuMS0xMCAyMC4zLTEzLjIgNi4yLTIuNCAxNS42LTUuMyAzMi44LTYuMSAxNi4zLS44IDIyLjYtMSA1NS41LTF6bTExMCAyOS4zYy0xMS43IDAtMjEuMiA5LjUtMjEuMiAyMS4yczkuNSAyMS4yIDIxLjIgMjEuMiAyMS4yLTkuNSAyMS4yLTIxLjItOS41LTIxLjItMjEuMi0yMS4yek0zMDAgMjA5LjRjLTUwLjEgMC05MC42IDQwLjYtOTAuNiA5MC42IDAgNTAuMSA0MC42IDkwLjYgOTAuNiA5MC42IDUwLjEgMCA5MC42LTQwLjYgOTAuNi05MC42IDAtNTAuMS00MC41LTkwLjYtOTAuNi05MC42em0wIDMxLjhjMzIuNSAwIDU4LjggMjYuMyA1OC44IDU4LjhzLTI2LjMgNTguOC01OC44IDU4LjgtNTguOC0yNi4zLTU4LjgtNTguOCAyNi4zLTU4LjggNTguOC01OC44eiIgc3R5bGU9ImZpbGw6I2ZmZiIvPg0KPC9zdmc+'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; display:inline-block; width: 32px; height: 32px; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; cursor:pointer; margin-right: 25px; float:left; } a.fb-ico { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+DQogIDxkZWZzPg0KICA8c3R5bGU+DQogICAgLnN0MHtmaWxsOiMzMzN9DQogICAgLnN0MXtmaWxsOiNmZmZ9DQogIDwvc3R5bGU+DQogIDwvZGVmcz4NCiAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTE2LDBBMTYsMTYsMCwxLDAsMzIsMTYsMTYsMTYsMCwwLDAsMTYsMFoiLz4NCiAgPHBhdGggY2xhc3M9InN0MSIgZD0iTTEzLjY5LDI0LjloMy42NzlWMTZoMi40NTRsLjMyNS0zLjA2OEgxNy4zNjlsMC0xLjUzNmMwLS44LjA3Ni0xLjIyOSwxLjIyNC0xLjIyOWgxLjUzNFY3LjFIMTcuNjc2Yy0yLjk0OSwwLTMuOTg2LDEuNDg5LTMuOTg2LDMuOTkydjEuODQySDExLjg1MlYxNkgxMy42OXY4LjlaIi8+DQo8L3N2Zz4='); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; width: 32px; height: 32px; margin-right: 25px; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; display:inline-block; float:left; cursor:pointer; } a.tw-ico { background-image: url('../img/twitter-black-white.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; width: 32px; height: 32px; margin-right: 25px; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; display:inline-block; float:left; } a.youtube-ico { background-image: url('../img/youtube.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: contain; display:inline-block; width: 32px; height: 32px; margin-right: 25px; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; cursor:pointer; float:left; } div.sm-icons > a.fb-ico { margin-right: 0; } div.instagram-b:hover, div.instagram-b:focus { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } a.fb-ico:hover, a.fb-ico:focus { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } a.tw-ico:hover, a.tw-ico:focus { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } a.youtube-ico:hover, a.youtube-ico:focus { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } a { color: var(--black); } a:hover, a:focus { color: var(--black); }
JS
Social Media Icons
Letzte Änderung: 11.09.2024 - 15:52 Uhr
×