Skip to content Skip to sidebar Skip to footer

Why The Fa Icon And A Are Not In The Same Line

I am debutant at html and css. I just wanted to create my first website using html and css but in the navbar I found that I cant make and fa icons in the same line, is th

Solution 1:

Remove float: right from .fa and add display: inline !important;.

You could also apply padding-left if required. Please see snippet below:

body{
        margin: 0;
        padding: 0
    }
    nav{
        background-color: purple;
        height: 55px;
        padding-top: 25px;
    }
    
    nava{
       text-decoration: none;
        color:white;
        margin-top:30px;
        font-size: 20px;
        margin-left: 10px;    
    }
    
    navspan{
        color: white;
        font-size: 15px;
    }
    
    .fa{
        /* updated here */display: inline !important;
    }
<html><head><title> Web page </title><linkrel="stylesheet"href="style.css"><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></head><body><!-- Navbar --><nav><ahref="">Acceuil</a><span> | </span><ahref="">Types d'appareils</a><span> | </span><ahref="">Ordinateurs</a><span> | </span><ahref="">Telephones</a><span> | </span><ahref="">O.S</a><span> | </span><ahref="">Etudes</a><ahref="#"class="fa fa-facebook"></a></nav><!-- End of Navbar --></body></html>

Solution 2:

************************ SOLVED ************************

Here is your updated code.

body{
    margin: 0;
    padding: 0
}
nav{
    background-color: purple;
    height: 55px;
    padding-top: 25px;
}

nava{
    display: inline-block; /*added*/text-decoration: none;
    color:white;
    font-size: 20px;
    margin-left: 10px/*margin-top:30px;*/
}

navspan{
    color: white;
    font-size: 15px
}

.fa{
    float: right;
}
<html><head><title> Web page </title><linkrel="stylesheet"href="style.css"><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></head><body><!-- Navbar --><nav><ahref="">Acceuil</a><span> | </span><ahref="">Types d'appareils</a><span> | </span><ahref="">Ordinateurs</a><span> | </span><ahref="">Telephones</a><span> | </span><ahref="">O.S</a><span> | </span><ahref="">Etudes</a><ahref="#"class="fa fa-facebook"></a></nav><!-- End of Navbar --></body></html>

Post a Comment for "Why The Fa Icon And A Are Not In The Same Line"