Alexander Solonik Alexander Solonik - 6 months ago 26
CSS Question

unnecessary dash in Instagram icon for font awesome

I have this site HERE , i have the following code for the font awesome icons in the navbar:

<u class="nav-social-media">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
</u>


Now i have checked all the psudo code in the
:after
and
:before
parts , but i still seem to get this small dash:

enter image description here

Why am i getting that dash ??

I even tried changing the Instagram icon to a image instead of the icon , but still get the dash . Why ??

Answer

You've got your li items contained in an underline element.

Change that to an un-ordered list element instead, and you'll be sorted.

<ul class="nav-social-media">
    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
    <li><a href="#"><i class="fa fa-instagram"></i></a></li>    
</ul>