Strange Underlines in Font-Awesome CSS

Strange underlines in font-awesome CSS

Those lines usually come from the default (underline) a element style.

Either use another element or remove the underline :

a.social { /* or whatever your class */
   text-decoration: none;
}

Font Awesome icons have text-decoration issues inside links

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>

How do I make it so font-awesome icons have no text decoration?

.notxtdec selects a div, not your link. If you want to set the text-decoration for the hyperlink, you need to do something like this, which targets the anchor tag:

.notxtdec {
    text-align: center;
    align-items: center;
    font-size: 12px; 
}

.notxtdec a {
    text-decoration: none; 
}

text-decoration will just remove the underline that most browsers automatically add, so if you're trying to set the link, active, or visited colors, you need to add those rules as well:

/* anchor tags which have a valid href attribute */
.notxtdec a:link {
    color: #yourcolorhere
}

/* anchor tags which are being pressed/clicked */
.notxtdec a:active {
    color: #yourcolorhere
}

/* anchor tags which have an href which exists in the browser's history */
.notxtdec a:visited {
    color: #yourcolorhere
}

A weird thick line under text

Probably default user agent stylesheet contains

text-decoration: underline;

To avoid this you should put

text-decoration: none;

inside the selector of DOM element.

For example:

h1 {
  text-decoration: none;
}

I hope that I helped ;)

An unexpected UNDERSCORE appearing

The a link is underlined by default and contains the icon and empty spillover.

Add
text-decoration: none; to the links to prevent the default underscore style on links.

EDIT: Full Example(without icons):

<!DOCTYPE html><html><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"><body class="w3-container">
<table><tr><td>            <a href="ajaxAction.php?aid=<?php echo $r['id']; ?>">                <i class="fa fa-check w3-text-green w3-hover-green"></i>            </a>                         <a href="ajaxAction.php?unid=<?php echo $r['id']; ?>">                <i class="fa fa-times w3-text-red w3-hover-red"></i>            </a></td></tr><tr><td>            <a style="text-decoration:none;" href="ajaxAction.php?aid=<?php echo $r['id']; ?>">                <i class="fa fa-check w3-text-green w3-hover-green">_</i>            </a>                         <a style="text-decoration:none;" href="ajaxAction.php?unid=<?php echo $r['id']; ?>">                <i class="fa fa-times w3-text-red w3-hover-red">_</i>            </a></td></tr><tr><td>            <a style="text-decoration:none;" href="ajaxAction.php?aid=<?php echo $r['id']; ?>">                <i class="fa fa-check w3-text-green w3-hover-green">_</i>            </a>                         <a style="text-decoration:none;" href="ajaxAction.php?unid=<?php echo $r['id']; ?>">                <i class="fa fa-times w3-text-red w3-hover-red">_</i>            </a></td></tr></table></body></html>

Glyphicon weird link decoration behavior

You need just a little fix:

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

Font Awesome Icon Placement Issue in Circle for Different Browsers

If Andrej's solution doesn't work because you want to only have to change the font size, try using em values for the width and height:

.addToFav {
    position: relative;
    font-size: 15px;
    color: #fff;
    background: blue;
    width: 1.2em;
    height: 1.2em;
    line-height: 1.2em;
    border-radius: .6em;
}

In this example, you still won't need .addToFav .fa or .addToFav .fa::before selectors, but you can change the font size and the resulting symbol will scale

EDIT:
Alternatively, you could use FontAwesome's .fa-plus-circle icon instead:
You would replace your .fa-plus icon, remove selectors .addToFav .fa and .addToFav .fa::before and use the following CSS:

.addToFav {
    line-height: 1;
    font-size: 1.4em;
    color: blue;
}

Here's a pen with fa-plus-circle:
https://codepen.io/anon/pen/NLEXqN

Strange Underlines in Font-Awesome CSS