ソーシャルメディアのアイコンが表示されない

ソーシャルメディアアイコン "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のですか？ –

ソーシャルメディアのアイコンが表示されない

答えて

関連する問題