Removing links underline in the gaps

Question

Sorry form my English.

Hi, I am in some references use FontAwesome and I need between the icon and remove the underlining text links, is there such a possibility?

enter image description here

<p><a href="#"><i class="fa fa-user"></i> Username</a></p>

Pattern in JSFiddle

[`text-decoration` is the CSS property you are looking for.](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) — Ry-, May 18 '14 at 06:36
Sorry, maybe I did not exactly put the question, I do not know very well English, but the user **BillOfUK** understood me and answer all my question. Thank you. — Jeen Jay, May 18 '14 at 06:46

score 1 · Accepted Answer · answered May 18 '14 at 06:41

1

Remove the space and use padding inside the i tag

a:hover {text-decoration:none;}
a i {text-decoation:none; padding-right:5px}

answered May 18 '14 at 06:41

b_uk_happy

score 0 · Answer 2 · answered May 18 '14 at 06:37

0

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

answered May 18 '14 at 06:37

seek.estate

Ali Gajani · Answer 3 · 2014-05-18T06:42:59.250

0

Fiddle

If you want to remove the line between a and i, then add a padder: padding-right

a:hover {text-decoration:none;}
a i { text-decoration:none; padding-right:10px;}

Also, remove space before your text "Username". I fixed it in the fiddle anyway.

enter image description here

edited May 18 '14 at 06:42

answered May 18 '14 at 06:37

Ali Gajani