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

Как добавить иконку в кнопку - Способ 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>
Content Oriented Web
Make great presentations, longreads, and landing pages, as well as photo stories, blogs, lookbooks, and all other kinds of content oriented projects.
Content Oriented Web
Make great presentations, longreads, and landing pages, as well as photo stories, blogs, lookbooks, and all other kinds of content oriented projects.
Пример для кнопок в ZeroBlock
<script>
  //Добавляем фото с иконкой к нужной кнопке   
  $(".tn-elem__419403141515498933081 a").append('<img src="https://static.tildacdn.com/tild3634-3832-4331-a631-353965353139/oldtypicalphone.svg" class="addiconimg">')
 
</script>

<style>
/*Задаём ширину иконки, отступ слева*/
  .addiconimg {
    /*Задаём ширину*/
    width: 22px;
    /*Задаём отступ слева для иконки*/
    margin-left: 12px;
    /*Располагаем иконку в центре по вертикали*/
    vertical-align: middle;
 }       
</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