Adding FontAwesome icons to links produces artifacts

Question

Using Visual Studio Code the following simple embed of a FA icon in version 5 produces a very small underline artefact in a browser.

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

The single white space before the closing </a> tag is the culprit. An obvious solution is not to use a space! However if using a code editor code formatting will inevitably produce plenty of white space which although reduced by the browser to a single white space the artefact will inevitably appear.

The only solution I have is to use a suitable CSS selector to prevent the underline occurring.

Can anyone suggest anything else?

Yes really @zer00ne! Editors do use spaces and soft returns, at least mine do, to make it all look pretty and readable. Browsers don't mind too much as they convert multiple spaces into just one space which is rather the point of the post in the first place. Probably putting the FA classes on the `` tag is probably the best solution on reflection as formatting won't add any space. — johnbirt, Apr 13 '18 at 01:50
VS code, Notepad, Notepad++ and any other if formatting with spaces, tabs,...etc. If editor offers minifying then you won't see it. You will see the artefact(s) in any ` ` with a space like so. — johnbirt, Apr 14 '18 at 09:32
The only space that shows up in Notepad++ that I don't type myself is at the end of void elements: `` — zer00ne, Apr 14 '18 at 14:36
So what would I expect to see in my browser with your example.? — johnbirt, Apr 14 '18 at 19:44
Exactly what is in the previous comment, That space before ` />` is the only thing that I can't control on Notepad++ without wasting my time making a macro just for that. — zer00ne, Apr 14 '18 at 20:13
My browser wouldn't see anything! Maybe this will make the point [link](https://jsfiddle.net/johnbirt/oahqep5v/3/). — johnbirt, Apr 14 '18 at 21:35

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

That's definitely not your editor that's formatting oddly, it's how the browser renders an anchor when it is nested within an element and is at default styles. The default styles are:

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

If you overwrite either one of these properties, you shouldn't see those artifacts. Any of these particular styles will fix the problem:

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

In the following Demo, click the top 3 icons to toggle between the styles.

Demo

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

Adding FontAwesome icons to links produces artifacts

1 Answers1

Demo