Tengo el siguiente código para un menú de navegación, pero debo agregar propiedades que se aplican directamente a los elementos hijos como que las palabras "Inicio"... "Cursos"... "Tutoriales"... y "Acerca de"... Estén del lado derecho del icono. Se supone que debo usar las propiedades de flexbox, aunque también se pueden agregar float, posiciones etc. Pero el flexbox debe estar presente ....... Podrían ayudarme?......... Esta es una imagen de referencia, debe quedar algo parecido..........
CSS....
.menu-avanzado ul {
display: flex;
justify-content: space-around;
}
.menu-avanzado li {
height: 125px;
}
.menu-avanzado li a {
display: inline-block;
}
.icono {
font-size: 25px;
margin-right: 10px;
}
.texto-boton {
font-size: 25px;
}
.texto-boton span {
display: block;
font-size: 40%;
font-weight: lighter;
font-style: italic;
}
html {
font-family: sans-serif;
}
body {
margin: 0;
line-height: 1.5;
}
.centrado {
margin: 0 auto;
padding: 0 1em;
max-width: 900px;
}
.menu-seccion {
padding-bottom: 2em;
margin-bottom: 2em;
border-bottom: 1px solid hsl(0, 0%, );
}
.menu ul {
list-style-type: none;
padding: 0;
margin: 0;
background: #465362;
}
.menu li a {
text-decoration: none;
color: white;
padding: .6em 1em;
}
HTML....
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="centrado">
<section class="menu-seccion">
<h2 class="menu-titulo">Menú avanzado</h2>
<nav id="menu-avanzado" class="menu-avanzado menu">
<ul>
<!-- -->
<li>
<a href="#">
<div class="icono">
<i class="fa fa-home"></i>
</div>
<div class="texto-boton">Inicio
<span>Página principal</span>
</div>
</a>
</li>
<!-- -->
<li>
<a href="#">
<div class="icono">
<i class="fa fa-graduation-cap"></i>
</div>
<div class="texto-boton">Cursos
<span>Aprendizaje garantizado</span>
</div>
</a>
</li>
<!-- -->
<li>
<a href="#">
<div class="icono">
<i class="fa fa-book"></i>
</div>
<div class="texto-boton">Tutoriales
<span>Trucos y consejos</span>
</div>
</a>
</li>
<!-- -->
<li>
<a href="#">
<div class="icono">
<i class="fa fa-info-circle"></i>
</div>
<div class="texto-boton">Acerca de
<span>¿Quiénes somos?</span>
</div>
</a>
</li>
</ul>
</nav>
</section>
</div>