0

Quiero hacer que los íconos estén a la izquierda del texto, pero no lo consigo; intenté de diferentes métodos, sin embargo no tuve éxito alguno en lograr esto. ¿Cómo puedo lograr que los íconos puestos en este código estén a la izquierda de su texto correspondiente?.

Soy relativamente nuevo, por lo que es posible que haya errores que no veo.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="prototipo.css" rel="stylesheet" type="text/css">
    <script src="https://kit.fontawesome.com/6a46c21540.js" crossorigin="anonymous"></script>
    <title>DeadlyByDaylight</title>
</head>
<body>
    <header class="contenedor-header">
        <nav class="contenedor-nav">
            <ul class="contenedor-ul">
                <li class="contenedor-li"><i class="fa-solid fa-house-user"></i><a href="index.html" class="hipervinculo">Inicio</a></li>
                <li class="contenedor-li"><i class="fa-solid fa-house-user"></i><a href="mapas.html" class="hipervinculo">Mapas</a></li>
                <li class="contenedor-li"><i class="fa-solid fa-house-user"></i><a href="supervivientes.html" class="hipervinculo">Supervivientes</a></li>  
                <li class="contenedor-li"><i class="fa-solid fa-house-user"></i><a href="asesinos.html" class="hipervinculo">Asesinos</a></li>
                <li class="contenedor-li"><i class="fa-solid fa-house-user"></i><a href="estrategias.html" class="hipervinculo">Estrategias</a></li>
                <li class="contenedor-li"><i class="fa-solid fa-house-user"></i><a href="registrarse.html" class="hipervinculo">Registrate</a></li>
                <li class="contenedor-li"><i class="fa-solid fa-house-user"></i><a href="Ingresar.html" class="hipervinculo">Iniciar Sesion</a></li>
                <input class="contenedor-li" type="search" name="buscador" value="Buscar..."><input class="buton" type="button" name="buscar" value="Buscar">
            </ul>
        </nav>

CSS:

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: rgb(10, 10, 92);
}

.contenedor-header{
    background-color: rgb(79, 79, 255);
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
ul{
    background-color: rgb(79, 79, 255);
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
li{
    list-style-type: none;
    display: inline-block;
    margin: 20px;
    

}

a{
    text-decoration: none;
    color: aliceblue;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

2 respuestas 2

0

He modificado algo de tu código y he conseguido alinearlo. Espero que te sirva y sea lo que estás buscando.

Lo que he hecho es quitar los estilos que tenías en li, después a las etiquetas ul y li, con flexbox he hecho que estén centradas tanto vertical como horizontalmente y finalmente un margin-right a los iconos

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: rgb(10, 10, 92);
}

.contenedor-header{
    background-color: rgb(79, 79, 255);
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
ul{
    background-color: rgb(79, 79, 255);
    font-family:Verdana, Geneva, Tahoma, sans-serif;
   
  
}
li{

  margin: 20px;
}

a{
    text-decoration: none;
    color: aliceblue;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

ul, li {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}

i {
  margin-right: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="prototipo.css" rel="stylesheet" type="text/css">
    <script src="https://kit.fontawesome.com/6a46c21540.js" crossorigin="anonymous"></script>
    <title>DeadlyByDaylight</title>
</head>
<body>
    <header class="contenedor-header">
        <nav class="contenedor-nav">
            <ul class="contenedor-ul">
                <li class="contenedor-li"><i class="fa-solid fa-house-user"></i><a href="index.html" class="hipervinculo">Inicio</a></li>
                <li class="contenedor-li"><i class="fa-solid fa-house-user"></i><a href="mapas.html" class="hipervinculo">Mapas</a></li>
                <li class="contenedor-li"><i class="fa-solid fa-house-user"></i><a href="supervivientes.html" class="hipervinculo">Supervivientes</a></li>  
                <li class="contenedor-li"><i class="fa-solid fa-house-user"></i><a href="asesinos.html" class="hipervinculo">Asesinos</a></li>
                <li class="contenedor-li"><i class="fa-solid fa-house-user"></i><a href="estrategias.html" class="hipervinculo">Estrategias</a></li>
                <li class="contenedor-li"><i class="fa-solid fa-house-user"></i><a href="registrarse.html" class="hipervinculo">Registrate</a></li>
                <li class="contenedor-li"><i class="fa-solid fa-house-user"></i><a href="Ingresar.html" class="hipervinculo">Iniciar Sesion</a></li>
                <input class="contenedor-li" type="search" name="buscador" value="Buscar..."><input class="buton" type="button" name="buscar" value="Buscar">
            </ul>
        </nav>

0

Creo que te sobra esto

display: flex;
align-items: center;
justify-content: space-between;

en el selector del anchor, ya que creo que no hace nada, sólo molestar. Yo lo dejaría así

a{
    text-decoration: none;
    color: aliceblue;
    font-size: 20px;
}

Tu Respuesta

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

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