我的网站没有显示图标的颜色答案

【问题标题】：My website does not show the color of the icons我的网站没有显示图标的颜色
【发布时间】：2021-12-21 01:26:46
【问题描述】：

我正在创建一个网站，我在其中添加了社交媒体图标，但它们在屏幕上不可见。我在我的 CSS 文件中添加了所有图标的颜色。它也不显示这些图标的标题。我是网络开发的新手，所以请多多包涵。下面是我的 HTML 代码：

.h1 {
  font-size: '150%';
  color: 'beige';
}

.h3 {
  color: 'beige';
}

.contact-header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.contact-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.container {
  background-color: black;
  height: 600 px;
  padding: 30px;
  justify-content: center;
}

.social-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  margin: 2 px;
  flex-wrap: wrap;
  gap: 15px;
}

.blue-circle2 {
  background-color: rgb(0, 89, 255);
}

.red-circle1 {
  background-color: red;
}

.pink-circle1 {
  background-color: rgb(251, 57, 88);
}

.blue-circle3 {
  background-color: blue;
}

<html>

<head>
  <title>Home page</title>
  <link rel="style" href="CSS/style.css">
  <meta charset="UTF-8">
</head>

<body>
  <div className="container">
    <div className="contact-header">
      <h1>Contact Us</h1>
    </div>
    <div className="contact-content">

      <h3>Reach out to us at <a className="email-link" href="ourlibrary@gmail.com">email</a></h3>

    </div>
    <div className="social-buttons">
      <!--- <a href=>--->
      <div className="red-circle1">
        <img src="./img/youtube.svg" alt="YouTube icon" width='40' height='40' />
      </div>
      </a>
      <!--- <a href="https://twitter.com/CampusAndroid">---->
      <div className="blue-circle2">
        <img src="./img/twitter.svg" alt="Twitter icon" width='40' height='40' />
      </div>
      </a>
      <!--- <a href=>--->
      <div className="blue-circle3">
        <img src="./img/facebook.svg" alt="Facebook icon" width='40' height='40' />
      </div>
      </a>
      <!--- <a href=>--->
      <div className="pink-circle1">
        <img src="./img/instagram.svg" alt="Instagram icon" width='40' height='40' />
      </div>
      </a>
      <!--- <a href=>--->
      <div className="blue-circle2">
        <img src="./img/linkedin.svg" alt="LinkedIn icon" width='40' height='40' />
      </div>
      </a>
    </div>
  </div>
</body>

这是我的网站的样子：

我哪里错了？请提出建议。

【问题讨论】：

您的意思是class 而不是className？
className 用于React.js 以消除与JavaScript 中的class 的冲突。这似乎是基于html/css 的正常网站。正如@SebastianSimon 所说，将className 替换为class，然后您的css 将被应用。 :)
我改变了它，但它仍然显示相同的东西:(
当我将图像从 .svg 更改为 .png 时它起作用了

标签： javascript html css bootstrap-4

【解决方案1】：

首先，在Html 中，我们使用class 而不是className。我们在React.js、JSX 中使用className。如果您有兴趣，我建议您阅读;-) 但切中要害。您可以使用fontawesome 来欣赏您网站上的图标。它们非常易于使用且非常酷。要链接它们，您可以使用cdn 或其他方法（阅读文档）。下面是带有您的代码的 sn-ps 的简单示例。我希望你喜欢它。祝你好运;-)

.h1 {
  font-size: "150%";
  color: "beige";
}
.h3 {
  color: "beige";
}
.contact-header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}
.contact-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}
.container {
  background-color: #fff;
  height: 600 px;
  padding: 30px;
  justify-content: center;
}

.social-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  margin: 2 px;
  flex-wrap: wrap;
  gap: 15px;
}

.fa-youtube {
  background-color: white; /*background-color of your icon*/
  color: red; /*color of your icon*/
  font-size: 3rem; /*size of your icon*/
}

.fa-font-awesome{
  color: red; 
  font-size: 3rem; 
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="main.css" />
    <title>FontAwesome Icons</title>
    <script src="script.js" defer></script>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
      integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
  </head>

  <body>
    <div class="container">
      <div class="contact-header">
        <h1>Contact Us</h1>
      </div>
      <div class="contact-content">
        <h3>
          Reach out to us at
          <a class="email-link" href="ourlibrary@gmail.com">email</a>
        </h3>
      </div>
      <div class="social-buttons">
        <div className="red-circle1">
          <i class="fab fa-youtube"></i>
        </div>
        <div className="red-circle2">
          <i class="fab fa-font-awesome"></i>
        </div>
      </div>
    </div>
  </body>
</html>

【讨论】：

@Khushi 不客气！很高兴我能帮助你;-)