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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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