html - Font Awesome 图标无法在页脚中正确显示

HTML：

<div id="container">
  <h1>This website is currently getting a makeover.</h1>
  <p>It will be back shortly with updated portofolio, revamped          (custom) design, and new pricing.</p>
  <footer>
    <p class="left copyright">Copyright &copy; 2016 Patrick Black</p>
    <a class="social right" href="#"><i class="fa fa-twitter fa-2x"></i></a>
  </footer>
</div>

CSS（使用预处理器；手写笔；如果需要完整的代码，请评论：

html {
  position relative
  min-height 100%
}
body {
  font-family: 'Roboto', sans-serif;
  text-align center
  height 100%
  margin 0 0 50px
}
h1 {
  margin-top: 30vh;
}
footer {
  background black
  color white
  height 50px
  position absolute
  bottom 0
  left 0
  width 100%
}
.left {
  text-align left
}
.right {
  float right
}
.copyright {
  margin-left 10px
}
.social {
  display inline-block
}

这是完整的代码：： http://codepen.io/Mortiferr/pen/pyLYqa
如您所见，Twitter图标显示在页脚下方。

最佳答案

的

 <p class="left copyright">Copyright &copy; 2016 Patrick Black</p>

是页面的全宽，因此也将twitter部分强制到下一行。

您可以通过浮动该段落来解决此问题。

.left {
  text-align: left;
  float: left;
}

Codepen Demo

关于html - Font Awesome 图标无法在页脚中正确显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36654037/