Skip to main content
2 de 2
Halla != haya: correcciones ortográficas y de redacción, ruido removido
padaleiana
  • 3.3k
  • 13
  • 19
  • 27

No consigo que los íconos CSS estén alineados en el menú

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;
}