TelegramVkontakteMessengerSkype
Как поменять иконки социальных сетей в меню и footer для Tilda.сс
Contacts
© 2016 YourCompany
Product
  • Home page
  • Tour
  • Templates
  • Prices
Education
  • Workshops
  • How to make a website
  • Design course
  • Explore
Help
  • Knowledge base
  • Video tutorials
  • Code Export
  • Developers

Как поменять иконки социальных сетей в меню и footer для Tilda.сс

1
В этом примере заменим штатные иконки социальных сетей на собственные.
Пример выполнен для блоков ME301 и FT302
1. Добавляем штатные иконки (в примере 6 шт)
2. Добавляем стиль и скрипт

Дополнительный код нужно добавить в блок ДРУГОЕ►Т123
2
Добавляем штатные иконки (в примере 6 шт)
3
Дополнительный код нужно добавить в блок Другое -Т123
В коде заменяем ссылки иконок на собственные
Библиотека для примера

<style>
/*Задаём ширину иконок и анимацию*/
div[class*="social_links_item"], div[class*="sociallinks__item"] { transition: 0.3s ease-out !important}
/*Задаём вращение*/
div[class*="social_links_item"]:hover, div[class*="sociallinks__item"]:hover {transform: scale(1.3) rotateZ(360deg)}
div[class*="social_links_item"] svg, div[class*="sociallinks__item"] svg { display: none}
div[class*="social_links_item"] a , div[class*="sociallinks__item"] a {
    display: inline-block;
    width: 30px;
    height: 30px;
}
div[class*="social_links_item"] , div[class*="sociallinks__item"]{
    background-size: contain;
    padding: 0 3px;
    background-repeat: no-repeat;
    background-position: center;
}
div[class*="social_links_item"]:nth-child(1), div[class*="sociallinks__item"]:nth-child(1){background-image: url(https://static.tildacdn.com/tild3364-3138-4361-b266-616531613962/facebook.png)}
div[class*="social_links_item"]:nth-child(2), div[class*="sociallinks__item"]:nth-child(2){background-image: url(https://static.tildacdn.com/tild6234-3631-4963-b236-353636623439/instagram.png)}
div[class*="social_links_item"]:nth-child(3), div[class*="sociallinks__item"]:nth-child(3){background-image: url(https://static.tildacdn.com/tild3334-3564-4134-b539-636532383261/skype.png)}
div[class*="social_links_item"]:nth-child(4), div[class*="sociallinks__item"]:nth-child(4){background-image: url(https://static.tildacdn.com/tild3765-6232-4038-b436-323031633639/viber_2.png)}
div[class*="social_links_item"]:nth-child(5), div[class*="sociallinks__item"]:nth-child(5){background-image: url(https://static.tildacdn.com/tild6632-6264-4339-b139-356239336338/whatsapp.png)}
div[class*="social_links_item"]:nth-child(6), div[class*="sociallinks__item"]:nth-child(6){background-image: url(https://static.tildacdn.com/tild3865-3166-4130-b866-363234653034/youtube.png)}

</style>
Made on
Tilda