将 FontAwesome 图标添加到链接会产生工件答案

【问题标题】：Adding FontAwesome icons to links produces artifacts将 FontAwesome 图标添加到链接会产生工件
【发布时间】：2018-09-22 00:08:35
【问题描述】：

使用 Visual Studio Code，以下在版本 5 中简单嵌入 FA 图标会在浏览器中生成非常小的下划线伪影。

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

关闭 </a> 标记之前的单个空格是罪魁祸首。一个明显的解决方案是不使用空格！但是，如果使用代码编辑器代码格式化将不可避免地产生大量空白，尽管浏览器将其减少为单个空白，但不可避免地会出现伪影。

我唯一的解决方案是使用合适的 CSS 选择器来防止出现下划线。

谁能提出其他建议？

【问题讨论】：

是的，真的是@zer00ne！编辑确实使用空格和软返回，至少我的这样做，以使其看起来漂亮和可读。浏览器不会太介意，因为它们将多个空格转换为一个空格，这首先是帖子的重点。可能将 FA 类放在 <a> 标签上可能是反射的最佳解决方案，因为格式化不会添加任何空格。
这是什么代码编辑器？所见即所得的那种？
VS 代码、记事本、Notepad++ 和任何其他如果使用空格、制表符等进行格式化。如果编辑器提供缩小，那么您将看不到它。您将在任何带有类似空格的 <a> </a> 中看到人工制品。
Notepad++ 中出现的唯一我不自己输入的空格是在 void 元素的末尾：<link href="style.css" rel="stylesheet" />
那么我希望通过您的示例在浏览器中看到什么？

标签： html whitespace removing-whitespace font-awesome-5

【解决方案1】：

这绝对不是您的编辑器格式异常，而是浏览器在嵌套在元素中并且处于默认样式时呈现锚点的方式。默认样式为：

a {
  text-decoration: underline; 
  display: inline
}

如果您覆盖其中一个这些属性，您应该不会看到这些工件。这些特定样式中的任何一种都可以解决问题：

a {
  display: inline-block; /* or block */
  text-decoration: none
}

在下面的演示中，单击顶部 3 个图标以在样式之间切换。

演示

#bk:target {
  display: block
}

#ib:target {
  display: inline-block
}

#td:target {
  text-decoration: none
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Artifact</title>
  <meta name="viewport" content="width=960">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css">
</head>

<body>

  <p>Observe the small artefacts in the first 3 icons when formatted...</p>

  <a href="#bk" id='bk'>
    <i class="fab fa-twitter fa-5x"></i>
  </a>
  <a href="#ib" id='ib'>
    <i class="fab fa-facebook-f fa-5x"></i>
  </a>
  <a href="#td" id='td'>
    <i class="fab fa-pinterest fa-5x"></i>
  </a>

  <p>...and none in the next three.</p>

  <a href="#"><i class="fab fa-twitter fa-5x"></i></a>
  <a href="#"><i class="fab fa-facebook-f fa-5x"></i></a>
  <a href="#"><i class="fab fa-pinterest fa-5x"></i></a>

  <p>The first set of 3 icons are modified to demonstrate that the 3 CSS properties can fix the artifacts. Simply click any of first 3 icons and observe the removal of that particular artifact. The links are using the `:target` pseudo-class for this interaction
    so all three behave as if only one of them can be active at a time (like a group of identically named radio buttons.)</p>

</body>

</html>

【讨论】：