Adding a logo while keeping the design and responsiveness same - html

Question

I want to add a logo from font-awesome on the left of the home link in the nav bar. But when I added it the design of the entire page is ruined. I wanted all the links in the navbar in a single line but as soon as added that icon position of all the elements in ruined. Please someone suggest an edit such that the icon remains there as well as the design and responsiveness changes.
body{
box-sizing: border-box;
font-family: sans-serif;
background-color: #091118;
}
nav{
position: relative;
margin: 0;
padding: 0;
font-size: 0;
box-shadow: 0 2px 3px 0;
width: 100%;
height: 50px;
border-radius: 15px;
background-color: #04111ffa;
}
nav a{
width: 100%;
font-size: 15px;
color: seashell;
display: inline-block;
position: relative;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
line-height: 50px;
z-index: 5;
text-align: center;
}
.search-container{
float: right;
}
input[type=text]{
padding: 6px;
margin-top: 13px;
font-size: 17px;
border: none;
border-radius: 15px;
}
.search-container button{
float: right;
padding: 6px 10px;
margin-top: 13px;
margin-right: 30px;
font-size: 17px;
border-radius: 15px;
background-color: rgb(58, 233, 218);
}
span.fas {
max-width: 50px;
}
<nav>
<span class="fas fa-bars"></span>
Home
About
Contact
Privacy Policy
Docs
<div class="animation start-home"></div>
<div class="search-container">
<form>
<input type="text" placeholder="Search..." name="search" class="searchbar">
<button type="submit"><i class="fas fa-search"></i><span class="text">Search</span></button>
</form>
</div>
</nav>

Answer 1

body{
box-sizing: border-box;
font-family: sans-serif;
background-color: #091118;
}
nav{
position: relative;
margin: 0;
padding: 0;
font-size: 0;
box-shadow: 0 2px 3px 0;
width: 100%;
height: 50px;
border-radius: 15px;
background-color: #04111ffa;
}
nav a{
width: 100%;
font-size: 15px;
color: seashell;
display: inline-block;
position: relative;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
line-height: 50px;
z-index: 5;
text-align: center;
}
.search-container{
float: right;
}
input[type=text]{
padding: 6px;
margin-top: 13px;
font-size: 17px;
border: none;
border-radius: 15px;
}
.search-container button{
float: right;
padding: 6px 10px;
margin-top: 13px;
margin-right: 30px;
font-size: 17px;
border-radius: 15px;
background-color: rgb(58, 233, 218);
}
span.fas {
width: 100%;
display: block;
color: #fff;
font-size: 20px;
text-align: center;
}
<nav>
<span class="fas fa-bars">bars</span>
Home
About
Contact
Privacy Policy
Docs
<div class="animation start-home"></div>
<div class="search-container">
<form>
<input type="text" placeholder="Search..." name="search" class="searchbar">
<button type="submit"><i class="fas fa-search"></i><span class="text">Search</span></button>
</form>
</div>
</nav>