用于粘性页脚和字体很棒的问题的 CSS

问题描述

有人可以帮我制作这个粘性页脚吗？图标被隐藏，我不知道为什么 我需要创建一个带有超赞图标的 stisky 社交页脚，这很酷，但不幸的是，正如你所看到的，图标被隐藏了

我需要的是与你看到的相同的定位，但可能带有图标和文本

你能帮我把社交图标和文字添加到这个纯 css 粘性页脚吗？

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 (将#修改为@）