3

Вот моя картинка с социальными иконками. Мне необходимо добавить их, используя bootstrap / css.

Как спроектировать разделение иконок используя bootstrap или css?
Здесь мой код для footer.

<footer class="footer">
        <div class="container text-left">
            <small style="color:grey" class="copyright">Copyright &copy 2015 SVAPP Private Limited.All Rights Reserved.</small>
            <a href="#"><small style="color:grey" class="fa fa-lg fa-skype pull-right">  </small></a>
            <a href="#"><small style="color:grey" class="fa fa-lg fa-google-plus pull-right">  </small></a>
            <a href="#"><small style="color:grey" class="fa fa-lg fa-linkedin pull-right">  </small></a>
            <a href="#"><small style="color:grey" class="fa fa-lg fa-twitter pull-right">  </small></a>
            <a href="#"><small style="color:grey" class="fa fa-lg fa-facebook pull-right">  </small></a>
        </div><!--End container-->
    </footer><!--End footer 2-->    

Картинка здесь

Перевод вопроса: How to add the footer with social icons in bootstrap? @Prajwal K M

1

1 ответ 1

2

Вот одно из решений, как вы можете создать это с помощью Bootstrap и Font awesome icons.

У глифов Bootstrap нет социальных иконок, поэтому вы можете включить некоторые другие icons font.

.footer {
  background: #061D25;
  padding: 10px 0;
}
.footer a {
  color: #70726F;
  font-size: 20px;
  padding: 10px;
  border-right: 1px solid #70726F;
  transition: all .5s ease;
}
.footer a:first-child {
  border-left: 1px solid #70726F;
}
.footer a:hover {
  color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<footer class="footer">
  <div class="container text-center">
    <a href="#"><i class="fa fa-facebook"></i></a>
    <a href="#"><i class="fa fa-twitter"></i></a>
    <a href="#"><i class="fa fa-linkedin"></i></a>
    <a href="#"><i class="fa fa-google-plus"></i></a>
    <a href="#"><i class="fa fa-skype"></i></a>
  </div>
</footer>

Вы также можете создать это без framework Bootstrap, и css будет почти таким же, вам просто нужно включить ещё icons font.

footer {
  background: #061D25;
  padding: 10px 0;
  text-align: center;
}
footer a {
  color: #70726F;
  font-size: 20px;
  padding: 10px;
  border-right: 1px solid #70726F;
  transition: all .5s ease;
}
footer a:first-child {
  border-left: 1px solid #70726F;
}
footer a:hover {
  color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<footer>
  <a href="#"><i class="fa fa-facebook"></i></a>
  <a href="#"><i class="fa fa-twitter"></i></a>
  <a href="#"><i class="fa fa-linkedin"></i></a>
  <a href="#"><i class="fa fa-google-plus"></i></a>
  <a href="#"><i class="fa fa-skype"></i></a>
</footer>

Источник ответа

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.