Font Awesome图标在链接中有文本修饰问题

Question

当我在文本前面放置一个图标链接（链接内的图标）时，我遇到了一个字体很棒的“丑陋”问题。通过悬停图标，图标本身不会加下划线，但不知何故文本和图标之间的空间。 不知何故，来自链接的文本修饰css规则（悬停时下划线）与来自这个奇怪出现的空间中的图标的那个碰撞。

我怎样才能摆脱这个空间中的下划线，最后根本没有装饰？ （如果可能，不向link元素添加类也不使用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图标，在我看来，这种图标更好。

Here's 关于进行切换的好文章， here's 另一篇关于如何使用它们的文章。

<强>样本：

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即可，这应该可以解决问题。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>