Last active
December 8, 2024 03:58
-
-
Save baslie/44166b1e4a0ca7cbbd7f9ea40fe37932 to your computer and use it in GitHub Desktop.
Замена иконок у кнопок на WhatsApp, Telegram, VK и прочие (Тильда)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- ********************************************************************** --> | |
| <!-- Замена иконок у кнопок на WhatsApp, Telegram, --> | |
| <!-- VK и прочие в ЗероБлоке (Тильда) --> | |
| <!-- ********************************************************************** --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css"> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| var iconsMap = { | |
| '.uc-contact-whatsapp': 'fa-brands fa-whatsapp', | |
| '.uc-contact-telegram': 'fa-brands fa-telegram', | |
| '.uc-contact-instagram': 'fa-brands fa-instagram', | |
| '.uc-contact-facebook': 'fa-brands fa-facebook-f', | |
| '.uc-contact-vk': 'fa-brands fa-vk' | |
| }; | |
| for (var selector in iconsMap) { | |
| var btn = document.querySelector(selector + ' .tn-atom'); | |
| if (btn) { | |
| btn.textContent = ''; | |
| var icon = document.createElement('i'); | |
| icon.className = iconsMap[selector]; | |
| icon.style.color = '#ffffff'; | |
| btn.appendChild(icon); | |
| } | |
| } | |
| }); | |
| </script> | |
| <style> | |
| .uc-contact-whatsapp .tn-atom i, | |
| .uc-contact-telegram .tn-atom i, | |
| .uc-contact-instagram .tn-atom i, | |
| .uc-contact-facebook .tn-atom i, | |
| .uc-contact-vk .tn-atom i { | |
| font-style: normal !important; | |
| font-weight: normal !important; | |
| color: #ffffff !important; | |
| font-size: 20px !important; /* по умолчанию */ | |
| } | |
| /* Брейкпоинты Тильды (ширина экрана) */ | |
| /* От 320 до 480 пикселей */ | |
| @media screen and (max-width: 480px) { | |
| .uc-contact-whatsapp .tn-atom i, | |
| .uc-contact-telegram .tn-atom i, | |
| .uc-contact-instagram .tn-atom i, | |
| .uc-contact-facebook .tn-atom i, | |
| .uc-contact-vk .tn-atom i { | |
| font-size: 18px !important; | |
| } | |
| } | |
| /* От 481 до 640 пикселей */ | |
| @media screen and (min-width: 481px) and (max-width: 640px) { | |
| .uc-contact-whatsapp .tn-atom i, | |
| .uc-contact-telegram .tn-atom i, | |
| .uc-contact-instagram .tn-atom i, | |
| .uc-contact-facebook .tn-atom i, | |
| .uc-contact-vk .tn-atom i { | |
| font-size: 18px !important; | |
| } | |
| } | |
| /* От 641 до 960 пикселей */ | |
| @media screen and (min-width: 641px) and (max-width: 960px) { | |
| .uc-contact-whatsapp .tn-atom i, | |
| .uc-contact-telegram .tn-atom i, | |
| .uc-contact-instagram .tn-atom i, | |
| .uc-contact-facebook .tn-atom i, | |
| .uc-contact-vk .tn-atom i { | |
| font-size: 18px !important; | |
| } | |
| } | |
| /* От 961 до 1200 пикселей */ | |
| @media screen and (min-width: 961px) and (max-width: 1200px) { | |
| .uc-contact-whatsapp .tn-atom i, | |
| .uc-contact-telegram .tn-atom i, | |
| .uc-contact-instagram .tn-atom i, | |
| .uc-contact-facebook .tn-atom i, | |
| .uc-contact-vk .tn-atom i { | |
| font-size: 20px !important; | |
| } | |
| } | |
| /* От 1201 пикселей и выше */ | |
| @media screen and (min-width: 1201px) { | |
| .uc-contact-whatsapp .tn-atom i, | |
| .uc-contact-telegram .tn-atom i, | |
| .uc-contact-instagram .tn-atom i, | |
| .uc-contact-facebook .tn-atom i, | |
| .uc-contact-vk .tn-atom i { | |
| font-size: 20px !important; | |
| } | |
| } | |
| </style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment