1

¿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>

4
  • Agrega tu codigo para que podamos ayudarte
    – alanfcm
    el 15 jun. 2018 a las 0:10
  • versión de fontawesome? arriba o abajo de qué elemento? el 15 jun. 2018 a las 0:15
  • 5.0.13 es la version el 15 jun. 2018 a las 0:20
  • Creo que era font awesome (o puede que Bootstrap) que tiene sus propias clases para esto. Voy a mirar y lo confirmo.
    – Alvaro Montoro
    el 15 jun. 2018 a las 11:14

1 respuesta 1

1

para ponerlo a la derecha del texto: lo definís a la derecha del texto.

para ponerlo arriba del texto: insertas un salto de línea (line break) justo después del icono.

para ponerlo debajo del texto: lo definís a la derecha del texto e insertas un salto de línea (line break) justo antes del icono.

vas a tener que arreglar los line-height del css, y tal vez un text-center para los arriba/abajo de, o un display:block;margin:0 auto; todo depende de cómo quieras que se vea.

*, *::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="#">junex10 <i class="fas fa-home fa-lg"></i></a></li>
                <li><a href="#"><i class="fas fa-users fa-lg"></i> Documentacion</a></li>
                <li><a href="#">Proyectos<br/><i class="fas fa-briefcase fa-lg"></i></a></li>
                <li><a href="#"><i class="fas fa-user fa-lg"></i><br/>Contacto</a></li>              
            </ul>
        </div>
        </nav>
    </header>

1
  • Gracias ya logre moverlos el 15 jun. 2018 a las 0:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.