为链接添加FontAwesome图标出现下划线异常问题求助

我之前也碰到过这个烦人的问题！就是用VS Code格式化代码后，<a href="#"><i class="fab fa-twitter"></i> </a>里的那个空格会让浏览器给图标后面加个极小的下划线，观感特别别扭。下面给你几个实用的解决办法：

方法1：用CSS彻底消除下划线（最省心） #

如果你的设计里本来就不需要链接下划线，直接给<a>标签加样式：

a {
  text-decoration: none;
}

要是只想针对带FontAwesome图标的链接，还可以加个类精准控制：

a.icon-link {
  text-decoration: none;
}

对应的HTML改成：

<a href="#" class="icon-link"><i class="fab fa-twitter"></i></a>

方法2：调整VS Code格式化规则，从根源避免空格 #

VS Code常用的格式化插件（比如Prettier）可以配置不在标签间自动加空格。以Prettier为例，在项目根目录的.prettierrc文件里添加以下配置：

{
  "htmlWhitespaceSensitivity": "strict"
}

这样格式化代码时，就不会在<i>和</a>之间生成多余空格了。

方法3：用空注释“欺骗”格式化工具 #

如果不想修改全局配置，可以在标签之间插入空注释，既满足格式化工具的规则，又不会让浏览器渲染出空格：

<a href="#"><i class="fab fa-twitter"></i><!-- --></a>

这个小技巧亲测有效，完美避开空格引发的下划线问题。

方法4：修改图标元素的显示属性 #

FontAwesome图标默认是inline元素，给它设置成inline-block或block，就能规避空格带来的下划线异常：

a i.fab {
  display: inline-block;
}

这样即使标签间有空格，浏览器也不会把空格当成文本内容来添加下划线了。

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