如何解决用于粘性页脚和字体很棒的问题的 CSS
有人可以帮我制作这个粘性页脚吗?图标被隐藏,我不知道为什么 我需要创建一个带有超赞图标的 stisky 社交页脚,这很酷,但不幸的是,正如你所看到的,图标被隐藏了
我需要的是与你看到的相同的定位,但可能带有图标和文本
css
/* Social Sharing Bar */
.share-bar {
position: fixed;
bottom: 0;
height: 51px;
border: none;
background: #ffffff;
z-index: 4999991;
transform: translateZ(0) translate3d(0,0);
-webkit-transform: translateZ(0) translate3d(0,0);
-moz-transform: translateZ(0) translate3d(0,0);
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
display: flex;
display: -webkit-Box;
display: -webkit-flex;
display: -ms-flexBox;
flex-direction: row;
-webkit-Box-orient: horizontal;
-webkit-Box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
align-items: flex-start;
-webkit-Box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
width: 100%;
Box-shadow: 0px -3px 3px 0px rgba(0,0.12);
}
.share-bar--list {
padding: 0;
list-style: none;
}
.share-bar .share-bar--list {
flex: 1 1 auto;
-webkit-Box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
overflow: hidden;
text-align: left;
font-size: 0;
}
.share-bar .share-bar--item {
display: inline-block;
width: 20%;
/* max-width: 71px; */
height: 60px;
line-height: 50px;
}
.share-bar--item {
float: left;
display: block;
font-size: 1.3rem;
height: 1.875rem;
width: 1.875rem;
line-height: 1.875rem;
text-decoration: none;
text-align: center;
color: #ffffff;
overflow: hidden;
}
/* Colours */
.facebook .share-bar--item,.share-bar .facebook .share-bar--item-link,.twitter .share-bar--item,.share-bar .twitter .share-bar--item-link,.whatsapp .share-bar--item,.share-bar .whatsapp .share-bar--item-link,.reddit .share-bar--item,.share-bar .reddit .share-bar--item-link,.linkedin .share-bar--item,.share-bar .linkedin .share-bar--item-link,.share-bar .linkedin .share-bar--item-link {
cursor: pointer;
width: 100%;
min-width: 100%;
display: block;
}
/* Facebook */
.facebook .share-bar--item,.share-bar .facebook .share-bar--item-link {
background-color: #3b5999;
}
/* Twitter */
.twitter .share-bar--item,.share-bar .twitter .share-bar--item-link {
background-color: #55acef;
}
/* What's App */
.whatsapp .share-bar--item,.share-bar .whatsapp .share-bar--item-link {
background-color: #61be4f;
}
/* Reddit */
.reddit .share-bar--item,.share-bar .reddit .share-bar--item-link {
background-color: #ff7730;
}
/* LinkedIn */
.linkedin .share-bar--item,.share-bar .linkedin .share-bar--item-link {
background-color: #4875b4;
}
/* Icons */
.share-bar--item-link:before {
display: inline-block;
color: #ffffff;
}
/* Facebook */
.share-bar .facebook .share-bar--item-link:before {
content: "\f09a";
font-family: "FontAwesome";
font-style: normal;
text-rendering: optimizeLegibility;
text-transform: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
/* Twitter */
.share-bar .twitter .share-bar--item-link:before {
content: "\f099";
font-family: "FontAwesome";
font-style: normal;
text-rendering: optimizeLegibility;
text-transform: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
/* What's App */
.share-bar .whatsapp .share-bar--item-link:before {
content: "\f232";
font-family: "FontAwesome";
font-style: normal;
text-rendering: optimizeLegibility;
text-transform: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
/* Reddit */
.share-bar .reddit .share-bar--item-link:before {
content: "\f281";
font-family: "FontAwesome";
font-style: normal;
text-rendering: optimizeLegibility;
text-transform: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
/* LinkedIn */
.share-bar .linkedin .share-bar--item-link:before {
content: "\f0e1";
font-family: "FontAwesome";
font-style: normal;
text-rendering: optimizeLegibility;
text-transform: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
<div class="share-bar">
<ul class="share-bar--list">
<li class="facebook share-bar--item">
<a class="share-bar--item-link" href="#" title="Share on Facebook." target="_blank">
</a>
</li>
<li class="twitter share-bar--item">
<a class="share-bar--item-link" href="#" title="Tweet this Article" target="_blank">
</a>
</li>
<li class="whatsapp share-bar--item">
<a class="share-bar--item-link" href="#">
</a>
</li>
<li class="reddit share-bar--item">
<a class="share-bar--item-link" href="#" title="Share on Reddit" target="_blank">
</a>
</li>
<li class="linkedin share-bar--item">
<a class="share-bar--item-link" title="Share on LinkedIn" target="_blank">
</a>
</li>
</ul>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。