Вот моя картинка с социальными иконками. Мне необходимо узнать, как добавить их, используя bootstrap / css
.
Как спроектировать разделение иконок используя bootstrap
или css
?
Здесь мой код для footer
.
<footer class="footer">
<div class="container text-left">
<small style="color:grey" class="copyright">Copyright © 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
Вот одно из решений, как вы можете создать это с помощью 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>
Перевод ответа: How to add the footer with social icons in bootstrap? @Nenad Vracar
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Возможно ли сделать так, чтобы Task выполнял функцию раз в минутуЕсли да, то как
Задача нажать клавишей мыши на кнопку и не отпуская протянуть по 10м другим кнопкам которые рядом находятсяДелаю обработку по собитию MouseDown...