企业网站社交图标无法显示问题求助（附CSS/HTML代码）

核心问题分析 #

你的代码存在两个直接导致图标不显示的错误：

1. 重复定义class属性：HTML元素不允许重复声明同一个属性，每个<a>标签写了两次class，浏览器只会识别第一个，Font Awesome的图标类未生效
2. 无效闭合标签：每个<a>标签末尾的</i>没有对应的起始标签<i>，属于冗余无效代码

修正后的代码 #

HTML代码（修正版） #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="centered">
  <a href="https://www.facebook.com/gemvisioncorp" class="fb fa fa-facebook" target="_blank"></a>
  <a href="https://www.instagram.com/gemvisioncorp/" class="insta fa fa-instagram" target="_blank"></a>
  <a href="https://twitter.com/gemvisioncorp" class="twitter fa fa-twitter" target="_blank"></a>
  <a href="https://www.linkedin.com/company/gemvision" class="linkedin fa fa-linkedin" target="_blank"></a>
  <a href="https://www.youtube.com/gemvisioncorp" class="youtube fa fa-youtube" target="_blank"></a>
</div>

CSS代码（无需修改） #

div.centered {
  display: flex;
  column-gap: 5px;
  justify-content: center;
  flex-wrap: wrap;
}

div.centered a {
  padding: 10px 12px;
  border-radius: 20px;
  font-size: 20px;
  color: white;
  display: inline-block;
  margin-bottom: 10px;
}

div.centered a:hover {
  opacity: 0.8;
}

.fb {
  background: #1877f2;
}

.insta {
  background: #fb3958;
}

.twitter {
  background: #00acee;
}

.linkedin {
  background: #0e76a8;
}

.youtube {
  background: #ff0000;
}

关于添加<i>标签的补充说明 #

你提到添加<i>时出现“Refused to Connect”错误，是因为标签嵌套写法有误。若想用<i>包裹图标，正确写法如下：

<a href="https://www.facebook.com/gemvisioncorp" class="fb" target="_blank">
  <i class="fa fa-facebook"></i>
</a>

该写法同样能正常显示图标，且不会触发连接错误。

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