Как добавить иконки социальных сетей в блок МЕ901 в Tilda

Help Center

Privacy

Hello! ✨ I’m Anna, a graphic designer and illustrator

I have been working as a freelance designer for almost 5 years. Check out my portfolio

Как добавить иконки социальных сетей в блок МЕ901 в Tilda

1

Создали блок МЕ901

2

Добавляем код в блок Другое - Т123
В коде заменяем ссылки на изображения иконок и задаём ссылки перехода

Библиотека для примера


<style>
.t830-icon-wrapper div {
    width: 30px;
    height: 30px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.t830-icon-wrapper {
    display: flex;
    margin-bottom: 20px;
}
.t830-icon-wrapper a { margin-right: 10px}
.t830-icon-wrapper a:nth-child(1) div {background-image: url(https://static.tildacdn.com/lib/tildaicon/64336137-3730-4330-a331-656162666562/sn_facebook.svg)}
.t830-icon-wrapper a:nth-child(2) div {background-image: url(https://static.tildacdn.com/lib/tildaicon/38343566-3234-4630-b863-383565653732/sn_vkontakte.svg)}
.t830-icon-wrapper a:nth-child(3) div {background-image: url(https://static.tildacdn.com/lib/tildaicon/62623164-6334-4465-b161-343730373230/sn_instagram.svg)}    
.t830-icon-wrapper a:nth-child(4) div {background-image: url(https://static.tildacdn.com/lib/tildaicon/63316563-3530-4438-b236-386566363465/sn_youtube.svg)}    
</style>


<script>
$( document ).ready(function() {
 
let iconWr = `<div class="t830-icon-wrapper">
                <a href="https://ru-ru.facebook.com/" target="_blank"><div></div></a>
                <a href="https://vk.com/" target="_blank"><div></div></a>
                <a href="https://www.instagram.com/" target="_blank"><div></div></a>
                <a href="https://www.youtube.com/" target="_blank"><div></div></a>
             </div>`;
$('.t830m__textwrapper').prepend(iconWr);

$('.t830m__list-title:first').click();

});	
</script>