添加a标签后Font Awesome邮箱图标重复显示问题求助

嘿，别纠结换图标库啦！你遇到的这个问题根本不是Font Awesome的锅，完全是HTML标签嵌套顺序错误导致的。

看你代码里邮箱图标的这一段：

<a href="mailto:someone@example.com">
<i class="social-icons--email far fa-envelope">
</a>
</i>

你把<a>标签放在了<i>外面，但闭合的时候先写了</a>，才写</i>——这属于无效的HTML嵌套结构。浏览器在解析这种错误代码时，会自动尝试修复，补全缺失的标签，结果就导致邮箱图标被重复渲染了。

只要把标签的闭合顺序改对就行，正确的写法应该是先闭合<i>，再闭合<a>：

<a href="mailto:someone@example.com">
  <i class="social-icons--email far fa-envelope"></i>
</a>

你看其他图标（相机、GitHub）的标签嵌套都是正确的，所以它们没有出现重复的问题，对吧？

修正这个小错误后，邮箱图标就能正常显示啦，完全不用换其他图标库~

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