Skip to main content
1 de 2

No consigo que los iconos CSS esten alineados en el menu

Quiero hacer que los iconos esten a la izquierda del texto, pero no lo consigo, intente de diferentes metodos, sin embargo no tuve exito alguno en lograr esto. ¿Como puedo lograr que los iconos puesto en este codigo esten a la izquierda de su texto correspondiente?. Soy relativamente nuevo, por lo que es posible halla errores que no veo, cualquier critica vendra bien para mejorar, gracias.

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