Помощь Не могу поставить иконки в один ряд

  • Автор темы Автор темы xjfg
  • Дата начала Дата начала
X

xjfg

Разрушитель (V)
Сообщения
77
Реакции
25
Баллы
812
Подскажите, что делаю не так:
<tr>
<td>
<a href="{{ viber_link }}" target="_blank" class="btn btn-primary" style="background-color: #665ca7;">
<i class="fa fa-comments-o">{{ text_open_viber }}</i>
</a>
</td>
<td>
<a href="{{ whatsapp_link }}" target="_blank" class="btn btn-success">
<i class="fa fa-whatsapp"></i>{{ text_open_whatsapp }}
</a>
<a href="{{ telegram_link }}" target="_blank" class="btn btn-info">
<i class="fa fa-telegram"></i>{{ text_open_telegram }}
</a>
</td>
</tr>
Не становятся иконки рядом и хоть тресни, вернее при такой конструкции стоят в один ряд, но между иконкой вайбера и ватсап есть розрыв, если делю на блоки ватсап и телеграм, большой разрыв между ними, если же всё делаю одним блоком, они становятся в столбик
 
у вас табличная верстка? зачем? это нужно в вашем случае? почему бы не сделать на flebox и блочной верстке?

HTML: 
<tr>
<div class="social-link">
<a>Иконка</a>
<a>Иконка</a>
<a>Иконка</a>
</div>
</tr>

CSS
CSS: 
.social-link {
    display:flex;
}
.social-link a {
    margin-right: 5px
}

Если нужна табличная верстка то не вижу теги <table></table> которые оборачивают таблицу
 
alexein66 сказал(а):
у вас табличная верстка? зачем? это нужно в вашем случае? почему бы не сделать на flebox и блочной верстке?

HTML: 
<tr>
<div class="social-link">
<a>Иконка</a>
<a>Иконка</a>
<a>Иконка</a>
</div>
</tr>

CSS
CSS: 
.social-link {
    display:flex;
}
.social-link a {
    margin-right: 5px
}

Если нужна табличная верстка то не вижу теги <table></table> которые оборачивают таблицу
Нажмите, чтобы раскрыть...
Извините, не полностью описал ситуацию, это часть шаблона на twig, полностью код такой:
Код: 
<table class="table">
            <tr>
              <td style="width: 1%;"><button data-toggle="tooltip" title="{{ text_customer }}" class="btn btn-info btn-xs"><i class="fa fa-user fa-fw"></i></button></td>
              <td>{% if customer %} <a href="{{ customer }}" target="_blank">{{ firstname }} {{ lastname }}</a> {% else %}
                {{ firstname }} {{ lastname }}
                {% endif %}</td>
            </tr>
            <tr>
              <td><button data-toggle="tooltip" title="{{ text_customer_group }}" class="btn btn-info btn-xs"><i class="fa fa-group fa-fw"></i></button></td>
              <td>{{ customer_group }}</td>
            </tr>
            <tr>
              <td><button data-toggle="tooltip" title="{{ text_email }}" class="btn btn-info btn-xs"><i class="fa fa-envelope-o fa-fw"></i></button></td>
              <td><a href="mailto:{{ email }}">{{ email }}</a></td>
            </tr>
            <tr>
              <td><button data-toggle="tooltip" title="{{ text_telephone }}" class="btn btn-info btn-xs"><i class="fa fa-phone fa-fw"></i></button></td>
              <td>{{ telephone }}</td>
                  <tr>
                    <td>
                        <a href="{{ viber_link }}" target="_blank" class="btn btn-primary" style="background-color: #665ca7;">
                        <i class="fa fa-comments-o">{{ text_open_viber }}</i></a>
                    </td>
                    <td>
                        <a href="{{ whatsapp_link }}" target="_blank" class="btn btn-success">
                       <i class="fa fa-whatsapp"></i>{{ text_open_whatsapp }}</a>
                       <a href="{{ telegram_link }}" target="_blank" class="btn btn-info">
                       <i class="fa fa-telegram"></i>{{ text_open_telegram }}</a>
                  </td>
               </tr>
            </tr>
          </table>
 
xjfg сказал(а):
Подскажите, что делаю не так:
<tr>
<td>
<a href="{{ viber_link }}" target="_blank" class="btn btn-primary" style="background-color: #665ca7;">
<i class="fa fa-comments-o">{{ text_open_viber }}</i>
</a>
</td>
<td>
<a href="{{ whatsapp_link }}" target="_blank" class="btn btn-success">
<i class="fa fa-whatsapp"></i>{{ text_open_whatsapp }}
</a>
<a href="{{ telegram_link }}" target="_blank" class="btn btn-info">
<i class="fa fa-telegram"></i>{{ text_open_telegram }}
</a>
</td>
</tr>
Не становятся иконки рядом и хоть тресни, вернее при такой конструкции стоят в один ряд, но между иконкой вайбера и ватсап есть розрыв, если делю на блоки ватсап и телеграм, большой разрыв между ними, если же всё делаю одним блоком, они становятся в столбик
Нажмите, чтобы раскрыть...
А зачем у всех кнопок разные классы?
 
Код: 
<table class="table">
            <tr>
              <td style="width: 1%;"><button data-toggle="tooltip" title="{{ text_customer }}" class="btn btn-info btn-xs"><i class="fa fa-user fa-fw"></i></button></td>
              <td>{% if customer %} <a href="{{ customer }}" target="_blank">{{ firstname }} {{ lastname }}</a> {% else %}
                {{ firstname }} {{ lastname }}
                {% endif %}</td>
            </tr>
            <tr>
              <td><button data-toggle="tooltip" title="{{ text_customer_group }}" class="btn btn-info btn-xs"><i class="fa fa-group fa-fw"></i></button></td>
              <td>{{ customer_group }}</td>
            </tr>
            <tr>
              <td><button data-toggle="tooltip" title="{{ text_email }}" class="btn btn-info btn-xs"><i class="fa fa-envelope-o fa-fw"></i></button></td>
              <td><a href="mailto:{{ email }}">{{ email }}</a></td>
            </tr>
            <tr>
              <td><button data-toggle="tooltip" title="{{ text_telephone }}" class="btn btn-info btn-xs"><i class="fa fa-phone fa-fw"></i></button></td>
              <td>{{ telephone }}</td>
              <td>
                <a href="{{ viber_link }}" target="_blank" class="btn btn-primary" style="background-color: #665ca7;">
                <i class="fa fa-comments-o">{{ text_open_viber }}</i></a>
              </td>
              <td>
                <a href="{{ whatsapp_link }}" target="_blank" class="btn btn-success">
                  <i class="fa fa-whatsapp"></i>{{ text_open_whatsapp }}</a>
              </td>
              <td>
                <a href="{{ telegram_link }}" target="_blank" class="btn btn-info">
                <i class="fa fa-telegram"></i>{{ text_open_telegram }}</a>
              </td>
              
            </tr>
          </table>
 
не, так ставит всё в одну строку и выходит за рамки таблицы, пока решил аналогичным способом размещения, только убрал текст с иконок а прописал тайтлы
Код: 
<td>
            <a href="{{ viber_link }}" target="_blank" class="btn btn-primary" style="background-color: #665ca7;" title="{{ text_open_viber }}">
            <i class="fa fa-comments-o"></i>
             </a>
        </td>
        <td>
                <a href="{{ telegram_link }}" target="_blank" class="btn btn-info" title="{{ text_open_telegram }}">
                <i class="fa fa-telegram"></i></a>
            </td>
не совсем то что хотелось, но пока пусть так будет
 
xjfg сказал(а):
Класом задаётся цвет иконки
Нажмите, чтобы раскрыть...
а просто цвет сразу написать сложнее ?
и классы написать свои, а не те у которых есть свои прописанные стили, может что от них тянется и мешает

зы мысли вслух просто
 
Для ответа нужно войти/зарегистрироваться
Назад
Верх