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