Вставил иконки соцсетей в хедер, поплыла верстка.

[tanderloin]

Добрый день, уважаемые форумчане, Прошу Вас помочь с такой проблемой: хочу вставить иконки соцсетей в хедер, я их практически вставил, но не могу понять где косяк, поехала верстка. Уже уроки по бутстрапу пришлось прочитать, и вроди бы по колонкам все правильно сделал, гляньте пожалуйста, кто разбирается, может есть совет, как вставить иконки Font avesome. Буду рад любому совету.

 

сайт moyatorba.com

 

код хедера не могу вставить в споллер, по той причине, что при предварительном просмотре, его просто не видно.

<header>
  <div class="container">
    <div class="row">
      <div class="col-sm-3">
        <div id="logo">
 <?php if ($logo) { ?>
          <a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" /></a>
          <?php } else { ?>
          <h1><a href="<?php echo $home; ?>"><?php echo $name; ?></a></h1>
          <?php } ?>
        </div>
      </div>
<div class="social">
 <div class="col-sm-1"><a href="https://vk.com/moyatorba1"><img src="image/vk.png" alt="vkontakte"></div>
 <div class="col-sm-1"><a href="https://instagram.com/moyatorba/"><img src="image/insta.png" alt="instagramm"></div>
 </div>
      <div class="col-sm-4"><?php echo $search; ?></div>
      <div class="col-sm-3"><?php echo $cart; ?></div>
     </div>
  </div>
</header>

[tanderloin]

Ребята, засада, подскажите, как добавить хоть какие-нибудь иконки ссылками (картинки или font awesome) в хедер между логотипом и поиском. Никак не могу решить проблему... Может есть где тема? Поиск не дал результата. Заранее спасибо.

[tanderloin]

Блин, такое впечатление, что опенкарт 2... это чисто коммерческий проект, на изменение минимального дизайна которого, нужны только деньги. Да, я в бутстрапе  - "0" с плюсом. Мне родная система опенкарт 1.5.4.. там я много чего узнал и поменял на своем успешном сайте... Но вот, накатилась задача, моя родная жена, солнышко мое ясное,  попросила сайт, для продажи сумок, кстати,  она этим здоровски занимается... и попросила вставить в хедер иконки соцсетей инстаграм и вк, так как эти соцсеци, выявляют больший интерес и активность, к ее товару чем все остальные. Следовательно, хотелось бы решить эту задачку, своими силами, но в коде, я - не очень силен. Да и времени разбираться, особо нет...

Я знаю и понимаю, что в хедер темплейт, есть строка "row" c тремя элементами, которые в общей сумме имеют длину 12-ти колонок, (Логотип, поиск и корзина, по 4-ре каждая), но какого вида должен быть код, что бы его вставить в этот ROW, и между логотипом и поиском появились иконочки вожделенных соцсетей... яне знаю... может кто - то поможет "не за красивое спасибо"...

[Tom]

Раз есть хоть малое понимание сетки бутстрапа то проще.

 

<div class="row">  (полоса) в которой заключены три элемента Лого,Поиск и Корзина ,имеют каждый третью часть от 12 колонок.Если говорить более детально ,то <div class="col-sm-4">.

 

Если нужно запихать ещё одну то думаю это даже первоклашка решит,сколько будет 12 разделить на 4.

 

Дальше уже дело техники,предпочтений итп.Внутрь пихаем ещё один класс,к примеру  <div class="social">. обёрнутый в нашу выделенную 1/4 колонок.

 

Открываем офф сайт Font Awesome .Выбираем нужные,вставляем внутрь нашего нового блока и работаем с этими иконками как с обычным шрифтом....

 

 

 

[tanderloin]

Уважаемый Tom, спасибо Вам, большое что откликнулись, я месяц не заходил на форум, так как никто не реагировал на мой пост. Подскажите, пожалуйста, каким образом, Вы сделали иконки большого размера, у меня не получается их увеличить ни стандартными способами, ни через css... вот мой код:

 <div class="container">
    <div class="row">
      <div class="col-sm-3">
        <div id="logo">
 <?php if ($logo) { ?>
          <a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" /></a>
          <?php } else { ?>
          <h1><a href="<?php echo $home; ?>"><?php echo $name; ?></a></h1>
          <?php } ?>
        </div>
      </div>
 <div class="col-sm-3">
  <div class="social">
    <div id="social">
      <a href="http://instagram.com/moyatorba" target="_blank" class="fa fa-instagram icon-5x"></a>
  <a href="https://www.facebook.com/profile.php?id=100011473369724" target="_blank" class="fa fa-5x fa-facebook"></a>
  <a href="http://vk.com/moyatorba1" target="_blank" class="fa fa-5x fa-vk"></a>
    </div>
   </div>
  </div>
      <div class="col-sm-3"><?php echo $search; ?></div>
      <div class="col-sm-3"><?php echo $cart; ?></div>
     </div>

[Tom]

/catalog/view/theme/default/stylesheet/stylesheet.css

после 

#social {
height: 40px;
font-size: 40px;
}

добавить к примеру так

#social .fa {
font-size: 33px;
}

[tanderloin]

 

/catalog/view/theme/default/stylesheet/stylesheet.css

после 

#social {
height: 40px;
font-size: 40px;
}

добавить к примеру так

#social .fa {
font-size: 33px;
}

Да, действительно, все получилось! Tom, спасибо огромнейшее! Не раз меня выручали!