社交媒体图标“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>最佳答案
对于 font-awesome，类应该是 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>关于html - 社交媒体图标不可见，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46579724/