Font Awesome 图标在页脚中无法正确显示
Font Awesome icons not displaying correctly within footer
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 © 2016 Patrick Black</p>
<a class="social right" href="#"><i class="fa fa-twitter fa-2x"></i></a>
</footer>
</div>
CSS(使用预处理器;Stylus;如果需要完整代码,请评论:
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 图标显示在页脚下方。
你应该使用这个 css 作为适合页脚的 Twitter 字体图标。
.social {
display inline-block;
position:absolute;
bottom:0;
right:0;
padding:6px
}
添加.copyright
条规则:
display inline-block
float left
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 {
display: inline-block;
float: left;
margin-left: 10px;
}
.social {
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<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 © 2016 Patrick Black</p>
<a class="social right" href="#"><i class="fa fa-twitter fa-2x"></i></a>
</footer>
</div>
您只需添加
.left{
float:left;
text-align left;
}
i{
line-height: 50px;
}
<p class="left copyright">Copyright © 2016 Patrick Black</p>
是页面的全宽,推特部分也是如此。
您可以通过浮动该段落来解决此问题。
.left {
text-align: left;
float: left;
}
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 © 2016 Patrick Black</p>
<a class="social right" href="#"><i class="fa fa-twitter fa-2x"></i></a>
</footer>
</div>
CSS(使用预处理器;Stylus;如果需要完整代码,请评论:
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 图标显示在页脚下方。
你应该使用这个 css 作为适合页脚的 Twitter 字体图标。
.social {
display inline-block;
position:absolute;
bottom:0;
right:0;
padding:6px
}
添加.copyright
条规则:
display inline-block
float left
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 {
display: inline-block;
float: left;
margin-left: 10px;
}
.social {
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<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 © 2016 Patrick Black</p>
<a class="social right" href="#"><i class="fa fa-twitter fa-2x"></i></a>
</footer>
</div>
您只需添加
.left{
float:left;
text-align left;
}
i{
line-height: 50px;
}
<p class="left copyright">Copyright © 2016 Patrick Black</p>
是页面的全宽,推特部分也是如此。
您可以通过浮动该段落来解决此问题。
.left {
text-align: left;
float: left;
}