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.сс?

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

Дополнительный код нужно добавить в блок ДРУГОЕ►Т123
<style>
  /*Задаём ширину иконок и анимацию*/
    .nsocicon {
    width: 40px;
    -webkit-transition: 0.5s ease-out;
    transition: 0.5s ease-out;
}
 /*Задаём виды анимации при наведении*/
 .nsocicon:hover {
   -webkit-transform: scale(1.3) rotateZ(360deg);
   -ms-transform: scale(1.3) rotateZ(360deg);
   transform: scale(1.3) rotateZ(360deg);
}
</style>

<script>
//Очищаем блок иконок в верхнем меню
$("div.t228__right_social_links_item a").empty();
//Добавляем иконки в меню
$(".t228__right_social_links_item:eq(0) a").append('<img src="https://static.tildacdn.com/tild3364-3138-4361-b266-616531613962/facebook.png" class="nsocicon t-img" imgfield="img">');
$(".t228__right_social_links_item:eq(1) a").append('<img src="https://static.tildacdn.com/tild6234-3631-4963-b236-353636623439/instagram.png" class="nsocicon t-img" imgfield="img">');
$(".t228__right_social_links_item:eq(2) a").append('<img src="https://static.tildacdn.com/tild3334-3564-4134-b539-636532383261/skype.png" class="nsocicon t-img" imgfield="img">');
$(".t228__right_social_links_item:eq(3) a").append('<img src="https://static.tildacdn.com/tild3765-6232-4038-b436-323031633639/viber_2.png" class="nsocicon t-img" imgfield="img">');
$(".t228__right_social_links_item:eq(4) a").append('<img src="https://static.tildacdn.com/tild6632-6264-4339-b139-356239336338/whatsapp.png" class="nsocicon t-img" imgfield="img">');
$(".t228__right_social_links_item:eq(5) a").append('<img src="https://static.tildacdn.com/tild3865-3166-4130-b866-363234653034/youtube.png" class="nsocicon t-img" imgfield="img">');

//Очищаем блок иконок в footer  
$("div.t-sociallinks__item a").empty(); 
//Добавляем иконки в footer  
$(".t-sociallinks__item:eq(0) a").append('<img src="https://static.tildacdn.com/tild3364-3138-4361-b266-616531613962/facebook.png" class="nsocicon t-img" imgfield="img">');
$(".t-sociallinks__item:eq(1) a").append('<img src="https://static.tildacdn.com/tild6234-3631-4963-b236-353636623439/instagram.png" class="nsocicon t-img" imgfield="img">');
$(".t-sociallinks__item:eq(2) a").append('<img src="https://static.tildacdn.com/tild3334-3564-4134-b539-636532383261/skype.png" class="nsocicon t-img" imgfield="img">');
$(".t-sociallinks__item:eq(3) a").append('<img src="https://static.tildacdn.com/tild3765-6232-4038-b436-323031633639/viber_2.png" class="nsocicon t-img" imgfield="img">');
$(".t-sociallinks__item:eq(4) a").append('<img src="https://static.tildacdn.com/tild6632-6264-4339-b139-356239336338/whatsapp.png" class="nsocicon t-img" imgfield="img">');
$(".t-sociallinks__item:eq(5) a").append('<img src="https://static.tildacdn.com/tild3865-3166-4130-b866-363234653034/youtube.png" class="nsocicon t-img" imgfield="img">');
    
</script>
Made on
Tilda