Font Awesome icons have text-decoration issues inside links

Question

I have a "ugly" issue with font-awesome, when I place a icon-link (icon inside a link) in front of a text. By hovering the icon, the icon itself will not get underlined but somehow the space between the text and the icon. Somehow the text-decoration css rule from the link (underline while hover) collides with the one coming from the icon in this strangely appearing space.

How can I get rid of this underline in the space and have no decoration at all in the end? (when possible without adding a class to the link element nor using JS)

Here is a code snippet that may help you.

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>

Fiddle: https://jsfiddle.net/kg6zdxu5/

Trudey

Answer 1

Apparently your <a> tag and your <i> tag will not render a space if you write them in a single line. Avoiding line break between these two elements fixes your issue.

---

Code Snippet:

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>

EDIT:

Usually it is better if you do not change the default display value of an element, but here you can use display: inline-block; in your <a> tag to remove that space.

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>

---

Not necessarily question-related but I stopped using icon fonts a while back and adopted SVG icons, which, in my opinion, are way better.

Here's a good article on making the switch, and here's another on how to use them.

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>

Llewellyn

Hoo. This actually really works. It is not a perfect solution, as it violates our (and may also other companies) coding rules. But in the end this really solves the issue. – Trudey

Let me see if I can offer another solution, but it may require changing your markup, is that okay? – Llewellyn

Actually there was a better way to remove this space which is adding display: inline-block; to your anchor tag. – Llewellyn

The solution with the inline-block is working great! Thanks! – Trudey

Answer 2

If I understood you correctly, you want to remove the unnecessary underline you have and add this underline under the icon.

Just remove the a:hover and replace it with i:hover, and that should do the trick.

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>

Fester

Hi, thanks for the solution. But I am looking for removing the underline at all (from the icon and the space). – Trudey

Just remove this part from your code. a:hover { text-decoration: underline; } – Fester

Thanks again! But this is not possible, as a:hover is actually wished - normal text links should get underlined when the mouse hovers it. – Trudey

Answer 3

Simply remove a:hover and add .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>

Gird

This is a very nice solution @Gird idk if you copied me or not, but +1 upvote – Fester

Thank you yash :-) – Gird

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>

Lasley

Answer 5

Usually this problem pops up when you have multiple font awesome icons, for example, below we have 2 icons:

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

The key class is text-decoration-none, which you define in your style sheet as follow:

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

In this way, while hovering, your font awesome icon won't show an underline. It overwrites your a:hover. Keep in mind that you need <span></span> tags to achieve this...

so you need a new :hover class plus <span> tags.

Deletion