在CodePen中添加社交媒体链接点击后显示空白页的问题排查

嘿，我来帮你排查这个问题~ 你遇到的链接跳转空白页的情况，大概率是这几个原因之一，咱们一个个来解决：

1. 先确认目标账号是否存在 #

首先你可以直接在浏览器地址栏输入https://twitter.com/Mr_Cool_Web，看看能不能正常打开这个用户主页。如果账号已经被注销、改了名字或者根本没注册，访问这个链接就会跳转到空白或者平台的提示页面，这不是你的代码问题哦。

2. 给链接加上合适的跳转属性 #

CodePen的预览环境是iframe，外部链接可能会被浏览器的安全机制拦截。你可以给<a>标签加上两个属性来解决：

<div class="col-md-2">
  <a href="https://twitter.com/Mr_Cool_Web" target="_blank" rel="noopener noreferrer">
    <i class="fab fa-twitter-square"></i>
  </a>
</div>

• target="_blank"：让链接在新标签页打开，避免在CodePen的预览iframe里被限制；
• rel="noopener noreferrer"：这是安全最佳实践，既能防止新页面获取原页面的上下文，也能避免部分浏览器的跳转拦截。

3. 检查Font Awesome图标是否加载正常 #

如果你的Font Awesome图标没加载出来，点击的时候可能点的是空白区域，根本没触发链接跳转，看起来就像跳了空白页。你得确认在CodePen的设置中已经正确引入了Font Awesome的资源，比如在HTML的外部资源里添加对应的样式文件。

要是做完这些还是有问题，你可以右键预览页面→选择“检查”→打开“控制台”看看有没有报错信息，这能帮你更快找到问题根源~

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