Font Awesome 图标在链接中存在文本装饰问题

Question

当我在文本前面放置图标链接（链接内的图标）时，我遇到了字体真棒的“丑陋”问题。 通过悬停图标，图标本身不会带有下划线，但文本和图标之间的空间会以某种方式出现。 不知何故，来自链接的文本装饰 css 规则（悬停时下划线）与来自这个奇怪出现空间中的图标的规则相冲突。

怎么才能去掉空间中的这条下划线，最后一点装饰都没有呢？ （如果可能，既不向链接元素添加类，也不使用 JS）

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

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

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> <h1> <a href="#"> <i class="fa fa-wrench"></i> </a> Text of Title </h1>

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

Answer 1

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

---

代码段：

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

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> <h1> <a href="#"><i class="fa fa-wrench"></i></a> Text of Title </h1> 

编辑：

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

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

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> <h1> <a href="#"> <i class="fa fa-wrench"></i> </a> Text of Title </h1> 

---

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

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

DEMO：

 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; } 

 <h1> <a href="#"> <svg class="icon icon-wrench"> <use xlink:href="#icon-wrench"></use> </svg> </a> Text of Title </h1> <svg style="display:none;"> <symbol id="icon-wrench" viewBox="0 0 30 32"> <title>wrench</title> <path class="path1" d="M6.857 26.286q0-0.464-0.339-0.804t-0.804-0.339-0.804 0.339-0.339 0.804 0.339 0.804 0.804 0.339 0.804-0.339 0.339-0.804zM18.357 18.786l-12.179 12.179q-0.661 0.661-1.607 0.661-0.929 0-1.625-0.661l-1.893-1.929q-0.679-0.643-0.679-1.607 0-0.946 0.679-1.625l12.161-12.161q0.696 1.75 2.045 3.098t3.098 2.045zM29.679 11.018q0 0.696-0.411 1.893-0.839 2.393-2.938 3.884t-4.616 1.491q-3.304 0-5.652-2.348t-2.348-5.652 2.348-5.652 5.652-2.348q1.036 0 2.17 0.295t1.92 0.83q0.286 0.196 0.286 0.5t-0.286 0.5l-5.232 3.018v4l3.446 1.911q0.089-0.054 1.411-0.866t2.42-1.446 1.259-0.634q0.268 0 0.42 0.179t0.152 0.446z"></path> </symbol> </svg> 

Answer 2

如果我对您的理解正确，则希望删除不必要的下划线并在图标下添加该下划线。

只需删除a:hover并将其替换为i:hover ，就可以解决问题。

 a { text-decoration: none; } .fa-wrench:hover { text-decoration: underline; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> <h1> <a href="#"> <i class="fa fa-wrench"></i> </a> Text of Title </h1> 

Answer 3

只需删除a:hover并添加.fa-wrench:hover 。

 h1 { font-size:2.5em; } a { text-decoration: none; } .fa-wrench:hover{ text-decoration: underline; } 

  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> <h1> <a href="#"> <i class="fa fa-wrench"></i> </a> Test Title </h1> 

Answer 4

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

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> <h1> <a href="#"> <i class="fa fa-wrench"></i> </a> Text of Title </h1> 

Answer 5

通常当你有多个字体真棒图标时会出现这个问题，例如，下面我们有 2 个图标：

<span>
<a href="https://github.com/" class="me-4 text-reset text-decoration-none">
<i class="fab fa-github px-1"></i>
</a>
</span>
<span>
<a href="https://github.com/" class="me-4 text-reset text-decoration-none">
<i class="fab fa-github px-1"></i>
</a>
</span>

关键类是 text-decoration-none，您在样式表中定义如下：

.text-decoration-none:hover{
    text-decoration: none;
}

这样，在悬停时，您的字体真棒图标不会显示下划线。 它会覆盖您的 a:hover。 请记住，您需要<span></span>标签来实现这一点...

所以你需要一个新的:hover类加上<span>标签。