¿Cómo puedo posicionar los iconos de font awesome indicando izquierda, derecha, abajo o arriba con CSS3?
Este es mi código:
*, *::after, *::before{
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body header{
font-family: Open Sans;
background: #363636;
}
body header .contenedor{
max-width: 1000px;
margin: 0 auto;
display: block;
}
header .logo{
display: flex;
justify-content: flex-end;
}
header .logo h3{
color: #f3f2f1;
text-align: center;
font-size: 40px;
font-family: 'Oswald', arial;
text-transform: uppercase;
}
header .menu{
position: absolute;
top: 12px;
display: flex;
align-content: flex-end;
}
header .menu i{
color: #f3f2f1;
cursor: pointer;
}
header .navegacion{
margin: 0 auto;
display: block;
max-width: 1300px;
}
header .navegacion_hijo{
position: absolute;
background: #363636;
padding: 40px;
}
.navegacion_hijo ul li{
list-style: none;
padding-top: 40px;
line-height: 60px;
box-shadow: 0 2px 0 0 #f3f2f1;
}
.navegacion_hijo ul li a{
text-decoration: none;
color: #f3f2f1;
text-align: center;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<header>
<div class="contenedor">
<div class="menu"><i class="fas fa-bars fa-2x" onclick="menu()"></i></div>
<div class="logo">
<h3>Guardian</h3>
</div>
</div>
<nav class="navegacion" id="navegacion">
<div class="navegacion_hijo">
<ul>
<li><a href="#"><i class="fas fa-home fa-lg" id="iconos"></i>junex10</a></li>
<li><a href="#"><i class="fas fa-users fa-lg" id="iconos"></i>Documentacion</a></li>
<li><a href="#"><i class="fas fa-briefcase fa-lg" id="iconos"></i>Proyectos</a></li>
<li><a href="#"><i class="fas fa-user fa-lg" id="iconos"></i>Contacto</a></li>
</ul>
</div>
</nav>
</header>