CSS 如何在引导程序中添加带有社交图标的页脚？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33517524/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add the footer with social icons in bootstrap?
提问by Prajwal K M
Here is my footer image with social icons. I need to know how to add that using bootstrap/css??
这是我的带有社交图标的页脚图片。我需要知道如何使用 bootstrap/css 添加它？
As like the picture shown. I need to know how to add that using bootstrap or css? How to design that separation? This is my code for the footer.
如图所示。我需要知道如何使用引导程序或 css 添加它？如何设计这种分离？这是我的页脚代码。
<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-->
回答by Nenad Vracar
Here is one solution how you can create this using Bootstrapand Font awesomeicons. Bootstrap glyphiconsdon't have social icons so you can include some other icons font.
这是一种解决方案，您可以如何使用Bootstrap和Font 超赞图标来创建它。Bootstrap字形没有社交图标，因此您可以包含一些其他图标字体。
.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>You can also create this without Bootstrap framework and css will be almost the same, you just need to include icons font.
您也可以在没有 Bootstrap 框架的情况下创建它，css 几乎相同，您只需要包含图标字体。
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 AlainIb
look in http://lipis.github.io/bootstrap-social/where you can get the icons for boostrap.
查看http://lipis.github.io/bootstrap-social/，您可以在其中获取 boostrap 的图标。
UPDATE 2:
更新 2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.10.1/bootstrap-social.css" rel="stylesheet" >
<body>
<div class="text-center">
<a onclick="" class="btn btn-social-icon btn-lg btn-facebook"><i class="fa fa-facebook"></i></a>
<a onclick="" class="btn btn-social-icon btn-lg btn-dropbox"><i class="fa fa-dropbox"></i></a>
<a onclick="" class="btn btn-social-icon btn-lg btn-flickr"><i class="fa fa-flickr"></i></a>
<a onclick="" class="btn btn-social-icon btn-lg btn-pinterest"><i class="fa fa-pinterest"></i></a>
</div>
</body>
</html>
