关于html：Font Awesome图标在链接内部存在文本修饰问题

Font Awesome icons have text-decoration issues inside links

当我在文本前面放置图标链接(链接内的图标)时，字体真棒存在"丑陋"的问题。通过将图标悬停，图标本身将不会带有下划线，但会以某种方式在文本和图标之间留出空间。
链接中的文本修饰css规则(在悬停时加下划线)以某种方式与来自这个奇怪显示空间中的图标的规则冲突。

如何摆脱空间中的下划线并且最终根本没有装饰？
(在可能的情况下，无需将类添加到link元素或使用JS)

这是一个可以帮助您的代码段。

1
2
3
4
5
6

a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}

1
2
3
4
5
6

小提琴：https://jsfiddle.net/kg6zdxu5/

显然，如果您将标签和标签写在一行中，它们将不会显示空格。避免这两个元素之间的换行可解决您的问题。

代码段：

1
2
3
4
5
6

a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}

1
2
3
4

编辑：

通常，最好不要更改元素的默认显示值，但是在这里您可以在标记中使用display: inline-block;删除该空间。

1
2
3
4
5
6
7
8
9

a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 > a {
display: inline-block;
}

1
2
3
4
5
6

不一定与问题相关，但我不久前就停止使用图标字体，而采用了SVG图标，我认为这样会更好。

这是一篇有关进行切换的好文章，而这是另一篇有关如何使用它们的文章。

演示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 > a {
display: inline-block;
color: purple;
}
.icon {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
.icon-wrench {
width: 0.939453125em;
}

1
2
3
4
5
6
7
8
9
10
11
12