Rectangle 27 0

Someone just responded but deleted their response. The solution was:

#utilitynav a i {text-decoration:none;}

html - Keep underline on anchor text but not on font awesome icon in a...

html css font-awesome
Rectangle 27 0

...but when you hover on the text part it still adds the underline to the icon. Any ideas?

To get this to work you'd need to contain the link text within a separate element (a span, ideally):

<a href="#">
    <span>Feedback</span>
    <i class="icon-comment"></i>
</a>

Now you can remove the text-decoration from the link completely and assign it only to the span (on hover):

a {
    text-decoration:none;
}

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

html - Keep underline on anchor text but not on font awesome icon in a...

html css font-awesome
Rectangle 27 0

The only way to do this reliably is to assign text-decoration:none to the first parent element i.e the initial a tag.

html - Keep underline on anchor text but not on font awesome icon in a...

html css font-awesome
Rectangle 27 0

If you cannot add a span element (let's assume you just have acccess to CSS), it should work withfloat:left or right on your icon element.

html - Keep underline on anchor text but not on font awesome icon in a...

html css font-awesome
Rectangle 27 0

Just add a span tag in your HTML and you should fine.

<a href="#" title="Feedback" id="feedbacktogglenav">
       <span class="linkHover">Feedback</span>
       <i class="icon-comment"></i>
    </a>
a {
    text-decoration:none;
}
.linkHover:hover{
    text-decoration: underline;
}
#utilitynav .icon-comment {
    font-size: 12px;
    margin-left: 3px;
    position: absolute;
    top: 2px;
}
#utilitynav .icon-comment:hover {
    text-decoration:none;
}
#utilitynav #feedbacktogglenav {
    margin-right: 12px;
}

html - Keep underline on anchor text but not on font awesome icon in a...

html css font-awesome
Rectangle 27 0

I've discovered a way of doing this without needing an extra span tag, it works in every browser I've tried it in (FF/Chrome/Safari/Opera)... except IE8 (I haven't tested in IE 9 or 10 either).

Just declare the icon as display:inline-block, no more underline on hover.

<a href="#" title="Feedback" id="feedbacktogglenav">
  Feedback<i class="icon-comment"></i>
</a>
a{
  text-decoration: none;
}
a:hover{
  text-decoration: underline;
}
i:after{
  content: '{icon}';
  display: inline-block;
  padding-left: 1em;
}

html - Keep underline on anchor text but not on font awesome icon in a...

html css font-awesome