Question

这是我的页脚图片，带有社交图标。我需要知道如何使用bootstrap / css ??

添加它

如图所示。我需要知道如何使用bootstrap或css添加它？如何设计这种分离？这是我的页脚代码。

<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-->

Image here

Answer 1

以下是一种解决方案，您可以使用 Bootstrap 和Font awesome图标创建此项。 Bootstrap glyphicons没有社交图标，因此您可以包含其他一些图标字体。

.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>

你也可以在没有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>

Answer 2

查看http://lipis.github.io/bootstrap-social/，您可以在其中获取boostrap的图标。

更新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>

如何在bootstrap中添加带有社交图标的页脚？

2 个答案: