社交媒體圖標不可見

社交媒體圖標「linkedin」未顯示，但它正確鏈接到我的linkedin頁面。 CSS效果也可以正常工作。我嘗試了所有可能性，但我無法解決它。我該如何解決？我使用的圖標是否有誤？感謝您提前提出建議。社交媒體圖標不可見

這是我的HTML和CSS代碼： -

html { 
 
    font-size: 20px; 
 
} 
 

 
body { 
 
    background-color: #ccc; 
 
    padding: 50px; 
 
    text-align: center; 
 
} 
 

 

 
/* Wrapper */ 
 

 
.icon-button { 
 
    background-color: white; 
 
    border-radius: 50%; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    font-size: 2.0rem; 
 
    height: 3.6rem; 
 
    line-height: 3.6rem; 
 
    margin: 0 5px; 
 
    position: relative; 
 
    text-align: center; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    width: 3.6rem; 
 
} 
 

 

 
/* Circle */ 
 

 
.icon-button span { 
 
    border-radius: 0; 
 
    display: block; 
 
    height: 0; 
 
    left: 50%; 
 
    margin: 0; 
 
    position: absolute; 
 
    top: 50%; 
 
    -webkit-transition: all 0.3s; 
 
    -moz-transition: all 0.3s; 
 
    -o-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
    width: 0; 
 
} 
 

 
.icon-button:hover span { 
 
    width: 3.6rem; 
 
    height: 3.6rem; 
 
    border-radius: 3.6rem; 
 
    margin: -1.8rem; 
 
} 
 

 
.linkedin span { 
 
    background-color: #0077B5; 
 
} 
 

 

 
/* Icons */ 
 

 
.icon-button i { 
 
    background: none; 
 
    color: white; 
 
    height: 3.6rem; 
 
    left: 0; 
 
    line-height: 3.6rem; 
 
    position: absolute; 
 
    top: 0; 
 
    -webkit-transition: all 0.3s; 
 
    -moz-transition: all 0.3s; 
 
    -o-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
    width: 3.6rem; 
 
    z-index: 10; 
 
} 
 

 
.icon-button .icon-linkedin { 
 
    color: #0077B5; 
 
} 
 

 
.icon-button:hover .icon-linkedin { 
 
    color: white; 
 
}

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' type='text/css' media='all' /> 
 

 
<div> 
 
    <a href="https://www.linkedin.com/in/archita-sundaray-b7240977/" target="_blank" class="icon-button linkedin"> 
 
    <i class="icon-linkedin"></i> 
 
    <span></span> 
 
    </a> 
 
</div>

來源

2017-10-05 Archita Sundaray

對於字體真棒，類應該是fa-linkedin。

html { 
 
    font-size: 20px; 
 
} 
 

 
body { 
 
    background-color: #ccc; 
 
    padding: 50px; 
 
    text-align: center; 
 
} 
 

 

 
/* Wrapper */ 
 

 
.icon-button { 
 
    background-color: white; 
 
    border-radius: 50%; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    font-size: 2.0rem; 
 
    height: 3.6rem; 
 
    line-height: 3.6rem; 
 
    margin: 0 5px; 
 
    position: relative; 
 
    text-align: center; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    width: 3.6rem; 
 
} 
 

 

 
/* Circle */ 
 

 
.icon-button span { 
 
    border-radius: 0; 
 
    display: block; 
 
    height: 0; 
 
    left: 50%; 
 
    margin: 0; 
 
    position: absolute; 
 
    top: 50%; 
 
    -webkit-transition: all 0.3s; 
 
    -moz-transition: all 0.3s; 
 
    -o-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
    width: 0; 
 
} 
 

 
.icon-button:hover span { 
 
    width: 3.6rem; 
 
    height: 3.6rem; 
 
    border-radius: 3.6rem; 
 
    margin: -1.8rem; 
 
} 
 

 
.linkedin span { 
 
    background-color: #0077B5; 
 
} 
 

 

 
/* Icons */ 
 

 
.icon-button i { 
 
    background: none; 
 
    color: white; 
 
    height: 3.6rem; 
 
    left: 0; 
 
    line-height: 3.6rem; 
 
    position: absolute; 
 
    top: 0; 
 
    -webkit-transition: all 0.3s; 
 
    -moz-transition: all 0.3s; 
 
    -o-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
    width: 3.6rem; 
 
    z-index: 10; 
 
} 
 

 
.icon-button .fa-linkedin { 
 
    color: #0077B5; 
 
} 
 

 
.icon-button:hover .fa-linkedin { 
 
    color: white; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' type='text/css' media='all' /> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
</head> 
 
<body> 
 
    <div> 
 
    <a href="https://www.linkedin.com/in/archita-sundaray-b7240977/" target="_blank" class="icon-button linkedin"> 
 
     <i class="fa fa-linkedin"></i> 
 
     <span></span> 
 
    </a> 
 
    </div> 
 
</body> 
 
</html>

來源

2017-10-05 07:05:42

感謝您的回答它的工作，但類圖標，LinkedIn的舊版本？ –

社交媒體圖標不可見

回答

相關問題