HTML和CSS圖標沒有顯示

-2

這樣的IM使用社會聯繫一些圖標，有沒有顯示出來，我知道我有正確的文件路徑等HTML和CSS圖標沒有顯示

莫非有人拿alook的代碼和幫助我請？在此先感謝

.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

來源

2015-06-30 Thomas Withers

因此，您使用瀏覽器檢查了圖像，並顯示路徑中沒有錯誤？因爲99％的時間是問題所在。另外請注意，您的CSS引用'icon-cube'，它在您發佈的HTML中不存在。 – j08691

你永遠不會在你的html中使用'.icon-cube'，那麼你爲什麼應該爲它定義的樣式應用？相反，你的圖標上有'icon-TYPE'類，並且從未在CSS中顯示。 – connexo

你的HTML缺少.icon-cube類

來源

2015-06-30 17:03:07

啊，所以我忘了重新 - 我的班級新的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>

來源

2015-06-30 17:10:14

HTML和CSS圖標沒有顯示

回答

相關問題