Question

所以我使用社交链接的一些图标并且没有显示，我知道我有正确的文件路径等。

有人可以接受代码并帮我解决一下吗？在此先感谢

.icon {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  margin: 4px;
  width: 96px;
  height: 96px;
  font-size: 0;
  text-indent: -9999px;
}

.icon-cube {
  position: relative;
  -webkit-perspective: 800px;
          perspective: 800px;
  overflow: visible;
}

.icon-cube::before,
.icon-cube::after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../img/icons5.png");
  background-image: url("../img/icons5.svg"), none;
  content: "";
  -webkit-transition: all 0.3s;
          transition: all 0.3s;
}

.icon-cube::before {
  z-index: 2;
  background-color: #595959;
}

.icon-cube::after {
  z-index: 1;
  opacity: 0;
  -webkit-transform: translateY(48px) rotateX(-90deg);
          transform: translateY(48px) rotateX(-90deg);
}

.icon-cube:hover::before {
  opacity: 0;
  -webkit-transform: translateY(-48px) rotateX(90deg);
          transform: translateY(-48px) rotateX(90deg);
}

.icon-cube:hover::after {
  opacity: 1;
  -webkit-transform: rotateX(0);
          transform: rotateX(0);
}

/* facebook */
.icon-cube.facebook::before,
.icon-cube.facebook::after {
  background-position: 0 0;
}

.icon-cube.facebook::after {
  background-color: #3b5998;
}

/* twitter */
.icon-cube.twitter::before,
.icon-cube.twitter::after {
  background-position: -96px 0;
}

.icon-cube.twitter::after {
  background-color: #4099ff;
}

/* google plus */
.icon-cube.googleplus::before,
.icon-cube.googleplus::after {
  background-position: -192px 0;
}

.icon-cube.googleplus::after {
  background-color: #d34836;
}

/* github */
.icon-cube.github::before,
.icon-cube.github::after {
  background-position: -288px 0;
}

.icon-cube.github::after {
  background-color: #333333;
}

/* rss */
.icon-cube.rss::before,
.icon-cube.rss::after {
  background-position: -384px 0;
}

.icon-cube.rss::after {
  background-color: #ee802f;
}

    <footer>
        <div class="container">
                <div class="row">
                    <div class="col-lg-12 social-link">
                        <p spellcheck="true">
                        <ul class="social">
                            <a href="#" class="icon icon-TYPE facebook">facebook</a>
                            <a href="#" class="icon icon-TYPE twitter">twitter</a>
                            <a href="#" class="icon icon-TYPE googleplus">google+</a>
                            <a href="#" class="icon icon-TYPE github">github</a>
                            <a href="#" class="icon icon-TYPE rss">rss</a>
                        </ul>
                    </div>
        <div class="container">
            <p class="copyright text-muted">Copyright &copy; TomTucka 2015</p>
        </div>
    </footer>

再次提前感谢，第一个代码集是CSS和第二个HTML

Answer 1

您的HTML缺少.icon-cube类

Answer 2

啊，所以我忘了重新命名我的课程新的HTML看起来像下面的片段，它的工作原理，谢谢你的帮助应该可以休息一下！

    <footer>
    <div class="container">
            <div class="row">
                <div class="col-lg-12 social-link">
                    <p spellcheck="true">
                    <ul class="icon-cube">
                        <a href="#" class="icon icon-TYPE facebook">facebook</a>
                        <a href="#" class="icon icon-TYPE twitter">twitter</a>
                        <a href="#" class="icon icon-TYPE googleplus">google+</a>
                        <a href="#" class="icon icon-TYPE github">github</a>
                        <a href="#" class="icon icon-TYPE rss">rss</a>
                    </ul>
                </div>
    <div class="container">
        <p class="copyright text-muted">Copyright &copy; TomTucka 2015</p>
    </div>
</footer>

HTML＆amp; CSS图标没有显示

2 个答案: