Weird underline when i add an ICON

[gordonisnz]

Hello. Ive used icons before - with no problems. However today ive added a new page which includes the w3-css Icon of a facebook logo.

 

i class="fa fa-facebook-official w3-blue"

 

Its at the bottom of the page (footer)  -  able.kwister.com    the problem is that

 

1) it has a blue line above/below the F character for facebook. 

2) when i add the & after the I element, I also get a black underline between the facebook logo & the next image.  The more AMP i add - the bigger the lines.

 

Is there something simple i'm missing     ?  I just want the F logo/circle - & i'll adjust the colour to match Facebooks logo..  without any lines above or below...

 

EDIT - Ive fixed the underline between the icon & the next graphic.  I had the closing A tag after the AMP tags instead of before..  but the other problem remains.

 

 

Edited June 1, 2020 by gordonisnz

[Ingolme]

If this object is wrapped in an <a> tag, use CSS to set the text-decoration of that link to "none".

[Inquirer]

I would also like to recommend a website that you can get icons and embed the HTML.

Icons8

I think you can figure out how to get the HTML but just in case.

1. Search an Icon(they have Facebook icons - old and new)

2. Click on the icon of your choice

3. Click on "Embed HTML"

4. Before you do that, you can choose to recolor by selecting the option on the sidebar!

And to embed, just put the copied HTML into the innerHTML

Example
<button onclick=window.open("https://icons8.com") id="i8">Insert the HTML for the icon here</button>
I'm sure you could have figured that out...
>_<