Skip to content Skip to sidebar Skip to footer
Home / Css / Html

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

Post a Comment
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;
    }
    
    nav a{
       text-decoration: none;
        color:white;
        margin-top:30px;
        font-size: 20px;
        margin-left: 10px;    
    }
    
    nav span{
        color: white;
        font-size: 15px;
    }
    
    .fa{
        /* updated here */  
        display: inline !important;
    }
<html>
        
    <head>
      <title> Web page </title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body> 
    <!-- Navbar -->
    <nav>
        <a href="">Acceuil</a> <span> | </span>
        <a href="">Types d'appareils</a> <span> | </span>
        <a href="">Ordinateurs</a> <span> | </span>
        <a href="">Telephones</a> <span> | </span>
        <a href="">O.S</a> <span> | </span>
        <a href="">Etudes</a>     
        <a href="#" 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;
}

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

nav span{
    color: white;
    font-size: 15px
}

.fa{
    float: right;
}
<html>
    
<head>
<title> Web page </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


</head>
<body> 
<!-- Navbar -->
<nav>
    <a href="">Acceuil</a> <span> | </span>
    <a href="">Types d'appareils</a> <span> | </span>
    <a href="">Ordinateurs</a> <span> | </span>
    <a href="">Telephones</a> <span> | </span>
    <a href="">O.S</a> <span> | </span>
    <a href="">Etudes</a> 

<a href="#" class="fa fa-facebook"></a>

 
</nav><!-- End of Navbar -->
    

</body>
</html>

You may like these posts

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