Как добавить в footer социальные иконки bootstrap

266

10 апреля 2017, 04:20

Вот моя картинка с социальными иконками. Мне необходимо узнать, как добавить их, используя 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

Answer 1

Вот одно из решений, как вы можете создать это с помощью 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>