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"