网站社交媒体图标颜色不显示、标题不可见，请问错误出在哪里？

存在的错误点 #

• HTML类属性书写错误：原生HTML使用class属性定义元素类名，你代码中全部写成了React专属的className，导致CSS规则完全无法匹配到对应元素。
• CSS文件引入错误：link标签的rel属性值应为stylesheet，你写的style是无效值，浏览器不会加载对应CSS文件。
• CSS数值语法错误：CSS中数值与单位之间不能有空格，600 px、2 px这类写法无效，需改为600px、2px。
• CSS选择器与属性值错误：你想要匹配<h1>、<h3>标签，却写了带点的.h1、.h3类选择器，完全匹配不到目标元素；同时font-size、color的属性值不需要加单引号，引号属于多余写法。
• HTML标签嵌套错误：所有社交媒体的<a>标签开头都被你注释掉了，但结尾的</a>还保留，属于无效的标签结构，如果你需要跳转链接要去掉a标签的注释，补全href属性值。
• 邮箱链接语法错误：邮箱跳转的href属性需要加mailto:前缀，否则点击后无法触发邮箱客户端唤起。
• 图标路径需确认：需要检查./img/目录下是否存在你写的对应svg文件，路径大小写、文件名拼写要完全一致，否则图标会加载失败显示alt文本。
• 圆形按钮样式缺失：原代码没有给彩色背景的容器加圆角和内边距，背景色无法呈现为圆形按钮效果，也可能导致图标和背景色重叠显示异常。

修改后的代码 #

修正后CSS代码 #

/* 去掉点直接匹配h1、h3标签，删除属性值多余引号 */
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: 600px; /* 移除数值和单位之间的空格 */
  padding: 30px;
  justify-content: center;
}

.social-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  margin: 2px; /* 移除数值和单位之间的空格 */
  flex-wrap: wrap;
  gap: 15px;
}

/* 新增圆形按钮通用样式 */
.blue-circle2, .red-circle1, .pink-circle1, .blue-circle3 {
  border-radius: 50%;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

/* 如果svg图标颜色和背景冲突可新增这个规则，也可以直接修改svg文件内部的fill属性为白色 */
.social-buttons img {
  filter: brightness(0) invert(1);
}

修正后HTML代码 #

<html>
<head>
  <title>Home page</title>
  <!-- 修正rel属性值为stylesheet -->
  <link rel="stylesheet" href="CSS/style.css">
  <meta charset="UTF-8">
</head>
<body>
  <!-- 所有className替换为class -->
  <div class="container">
    <div class="contact-header">
      <h1>Contact Us</h1>
    </div>
    <div class="contact-content">
      <!-- 邮箱链接新增mailto前缀 -->
      <h3>Reach out to us at <a class="email-link" href="mailto:ourlibrary@gmail.com">email</a></h3>
    </div>
    <div class="social-buttons">
      <!-- 移除a标签注释，补全跳转链接，修正嵌套结构 -->
      <a href="替换为你的Youtube主页地址">
        <div class="red-circle1">
          <img src="./img/youtube.svg" alt="YouTube icon" width='40' height='40' />
        </div>
      </a>
      <a href="https://twitter.com/CampusAndroid">
        <div class="blue-circle2">
          <img src="./img/twitter.svg" alt="Twitter icon" width='40' height='40' />
        </div>
      </a>
      <a href="替换为你的Facebook主页地址">
        <div class="blue-circle3">
          <img src="./img/facebook.svg" alt="Facebook icon" width='40' height='40' />
        </div>
      </a>
      <a href="替换为你的Instagram主页地址">
        <div class="pink-circle1">
          <img src="./img/instagram.svg" alt="Instagram icon" width='40' height='40' />
        </div>
      </a>
      <a href="替换为你的LinkedIn主页地址">
        <div class="blue-circle2">
          <img src="./img/linkedin.svg" alt="LinkedIn icon" width='40' height='40' />
        </div>
      </a>
    </div>
  </div>
</body>
</html>

额外验证提示 #

修改完成后如果图标仍不显示，直接在浏览器地址栏输入完整的图标路径（比如你的网站地址/img/youtube.svg），确认可以正常访问svg文件即可排查路径问题。

内容的提问来源于stack exchange，提问作者Khushi