复刻Codepen社交图标效果时仅显红圈，图标不可见求助

嘿，我帮你排查了代码里的问题，你遇到的图标不显示只出现红色圆形的情况，主要是Font Awesome资源加载异常导致的，下面给你一步步的解决方案：

问题根源分析 #

你当前的代码里有两个关键问题：

• 协议相对路径的加载限制：你用的Font Awesome引入路径是//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css，这种不带协议的路径在本地直接打开HTML文件（file://协议）时，浏览器会尝试用file://去请求资源，导致加载失败，图标无法渲染。
• 老旧版本的兼容性：Font Awesome 4.1.0是比较早期的版本，部分浏览器或环境下可能存在字体文件加载的兼容性问题。

修复步骤 #

1. 替换Font Awesome的引入链接 #

把原来的Font Awesome链接改成带https的绝对路径，同时升级到更稳定的4.7.0版本（这个版本兼容性更好，资源节点也更可靠）：

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

另外，建议把这个链接放在Google字体引入的后面、样式表引入的前面，确保样式能正确覆盖图标。

2. 验证资源加载状态 #

修改后，你可以打开浏览器的开发者工具（按F12），切换到Network标签页，刷新页面：

• 检查font-awesome.min.css是否显示为200状态（加载成功）
• 查看是否有.woff/.woff2等字体文件成功加载

3. 测试单个图标（可选） #

如果还是不确定，可以在页面里单独添加一个测试图标，比如：

<i class="fa fa-twitter"></i>

如果这个图标能正常显示，说明资源加载没问题，原来的社交栏样式逻辑是正确的。

修正后的完整Test.html代码 #

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Social Icons Demo</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href='https://fonts.googleapis.com/css?family=Raleway:400,200' rel='stylesheet' type='text/css'>
    <!-- 替换为稳定的Font Awesome 4.7.0资源 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<nav class="social">
    <ul>
        <li><a href="https://twitter.com/gian_michelle">Twitter <i class="fa fa-twitter"></i></a></li>
        <li><a href="https://facebook.com/">Facebook <i class="fa fa-facebook"></i></a></li>
        <li><a href="http://dribbble.com/gian_michelle">Dribbble <i class="fa fa-dribbble"></i></a></li>
        <li><a href="http://behance.net/gianm">Behance <i class="fa fa-behance"></i></a></li>
    </ul>
</nav>
</body>
</html>

这样修改后，你再打开页面就能看到正常显示的社交图标，同时原来的hover旋转、颜色变化的交互效果也能正常运行啦。

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