НОВОЕ ПРОСТРАНСТВО

Как добавить иконку в кнопку - Способ 2 - SVG для Tilda

SVG - т.к. большинство иконок распространяются в формате .svg

Где их можно взять:
- в библиотеке Tilda
- в фотобанке (например https://www.flaticon.com )
- нарисовать самостоятельно в векторном редакторе

Пример для блока BF101

<script>
  //Добавляем фото иконки в кнопку блока BF101  
  $(".t142__submit").prepend('<img src="https://static.tildacdn.com/tild3634-3832-4331-a631-353965353139/oldtypicalphone.svg" class="addiconimg">')
</script>

<style>
  /*Определяем вид показа элемента*/
  .t142__submit{
         display: inline-flex;
  }
  
  /*Настраиваем ширину и отступ слева для иконки*/
  .addiconimg {
    width: 28px;
    margin-right: 15px;
}
   
</style>
Пример для блока BF503

<script>
  //Добавляем фото иконки в кнопку блока BF101
  $(".t390__btn").addClass("second");
  $(".t390__btn_first").removeClass("second");
  
  $(".t390__btn_first").prepend('<img src="https://static.tildacdn.com/tild3836-3239-4538-a534-373235343134/credit-card.svg" class="addiconimg1">');
  $(".second").prepend('<img src="https://static.tildacdn.com/tild3136-3033-4363-b632-373633366630/notes.svg" class="addiconimg1">')
</script>

<style>
  /*Определяем вид показа элемента*/
  .t390__btn{
         display: inline-flex;
  }
  
  /*Настраиваем ширину и отступ слева для иконки*/
  .addiconimg1 {
    width: 28px;
    margin-right: -5px;
}
    
    
</style>
Пример для кнопок в ZeroBlock

<style>
    .tn-elem__1659904881515498678064 .tn-atom:after {
    content: '';
    background-image: url(https://static.tildacdn.com/tild3634-3832-4331-a631-353965353139/oldtypicalphone.svg);
    width: 22px;
    height: 22px;
    margin-left: 15px;
    display: inline-block;
    background-size: cover;
    background-repeat: no-repeat;
    vertical-align: middle;
    position: relative;
    top: -3px;
}

  .tn-elem__1659904881515498933081 .tn-atom:before {
    content: '';
    background-image: url(https://static.tildacdn.com/tild3361-3234-4639-a235-646162666338/okmark.svg);
    width: 22px;
    height: 22px;
    margin-right: 15px;
    display: inline-block;
    background-size: cover;
    background-repeat: no-repeat;
    vertical-align: middle;
    position: relative;
    top: -3px;
}
</style>
Пример для кнопок в BF501

<script>
  //Добавляем фото иконки в кнопку блока BF501  
  $(".t281__submit").prepend('<img src="https://static.tildacdn.com/tild6537-3235-4637-a665-303061343435/love.svg" class="addiconimg3">')
</script>
<style>
  /*Определяем вид показа элемента*/
  .t281__submit{
         display: inline-flex;
         line-height: 3;
         padding-left: 10px;       
  }
  /*Настраиваем ширину и отступ слева для иконки*/
  .addiconimg3 {
    width: 80px;
    margin-right: 15px;
    margin-top: -30px;
}
@media screen and (max-width: 570px){

.t281__input, .t281__submit {
    height: 50px;
    font-size: 16px;
    width: initial;
    margin-top: 20px;
}
.t281__descr , .t281__title , .t281__input-wrapper{
    text-align: center;
}
}  
</style>
Tilda Newsletter
Subscribe to our email newsletter for useful tips and valuable resources, sent out every month
Made on
Tilda