Question

我的导航栏图标有一些问题。我正在尝试放置我的Instagram和YouTube图标，但它们没有显示。当我单击链接时，我转到youtube / instagram页面，但它们没有显示在导航栏中。

body {
  font-family: monospace;
}

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

nav {
  height: 80px;
  background: #313840;
}

nav img {
  width: 150px;
  position: absolute;
  top: 5px;
  left: 0;
  margin-left: 35px;
}

.social-media-icons {
  height: 10px;
  font-size: 30px;
  margin-bottom: 0px;
  margin-left: 200px;
}

.fa:hover {
  opacity: 0.7;
}

.fa-youtube {
  background: #313840;
  color: #fff;
  height: 40px;
}

.fa-instagram {
  background: #313840;
  color: white;
  margin-top: 30px;
  height: 40px;
  margin-right: 30px;
}

<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Navbar</title>
  <link rel="stylesheet" href="header.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>

<body>
  <nav>
    <div class="social-media-icons">
      <a href="https://www.instagram.com/mmtuniversity_oficial/" class="fas fa-instagram" color="white" target="_blank"></a>
      <a href="https://www.youtube.com/channel/UCuf2KhhA8Ub3hcSgfaziiDw" class="fas fa-youtube" target="_blank"></a>
    </div>
    <input type="checkbox" id="check">
    <label for="check">
        <i class="fas fa-bars" id="btn"></i>
          <i class="fas fa-times" id="cancel"></i>
      </label>
    <img src="mmt-white.png">
    <ul>
      <li><a href="#"> Home</a></li>
      <li><a href="#">Onde Atuamos</a></li>
      <li><a href="#">Servicos</a></li>
      <li><a href="#">Depoimentos</a></li>
      <li><a href="#">comecando</a></li>
      <li><a href="#">Contacte-nos</a></li>
      <li2><a href="#">Acessar</a></li>
    </ul>
  </nav>

</body>

</html>

Answer 1

这是因为社交媒体图标是Font Awesome Brands字体家族的一部分。

将标记从fas更改为fab

<div class="social-media-icons">
      <a href="https://www.instagram.com/mmtuniversity_oficial/" class="fab fa-instagram" color="white" target="_blank"></a>
      <a href="https://www.youtube.com/channel/UCuf2KhhA8Ub3hcSgfaziiDw" class="fab fa-youtube" target="_blank"></a>
    </div>

body {
  font-family: monospace;
}

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

nav {
  height: 80px;
  background: #313840;
}

nav img {
  width: 150px;
  position: absolute;
  top: 5px;
  left: 0;
  margin-left: 35px;
}

.social-media-icons {
  height: 10px;
  font-size: 30px;
  margin-bottom: 0px;
  margin-left: 200px;
}

.fa:hover {
  opacity: 0.7;
}

.fa-youtube {
  background: #313840;
  color: #fff;
  height: 40px;
}

.fa-instagram {
  background: #313840;
  color: white;
  margin-top: 30px;
  height: 40px;
  margin-right: 30px;
}

<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Navbar</title>
  <link rel="stylesheet" href="header.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>

<body>
  <nav>
    <div class="social-media-icons">
      <a href="https://www.instagram.com/mmtuniversity_oficial/" class="fab fa-instagram" color="white" target="_blank"></a>
      <a href="https://www.youtube.com/channel/UCuf2KhhA8Ub3hcSgfaziiDw" class="fab fa-youtube" target="_blank"></a>
    </div>
    <input type="checkbox" id="check">
    <label for="check">
        <i class="fas fa-bars" id="btn"></i>
          <i class="fas fa-times" id="cancel"></i>
      </label>
    <img src="mmt-white.png">
    <ul>
      <li><a href="#"> Home</a></li>
      <li><a href="#">Onde Atuamos</a></li>
      <li><a href="#">Servicos</a></li>
      <li><a href="#">Depoimentos</a></li>
      <li><a href="#">comecando</a></li>
      <li><a href="#">Contacte-nos</a></li>
      <li2><a href="#">Acessar</a></li>
    </ul>
  </nav>

</body>

</html>

字体真棒图标无法正确显示

1 个答案: