Question

社交媒体图标＆＃34; linkedin＆＃34;没有显示，但它正确链接到我的linkedin页面。 CSS效果也可以正常工作。我已经尝试了所有可能性，但我无法解决它。我该如何解决？我使用的图标不正确吗？提前感谢您的建议。

这是我的HTML和CSS代码： -

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

对于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>

社交媒体图标不可见

1 个答案: