0

no sé que hago mal, pero no logro centrar un icono de font awesome, ya intenté con width: 50% y margin: auto pero no quiere funcionar, también intenté con text-center y tampoco, pido de su amable ayuda.

Ejemplo:

.social-twitter {
  background-color: #0084ff;
  height: 45px;
  width: 45px;
  border-radius: 50%;
}

.social-twitter a {
  color: #fff;
  font-size: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="mt-4 mb-3 p-3 bg_white shadow-sm">
  <ul class="nav justify-content-center">
    
    <li class="nav-item social-twitter mr-1">
      <a class="nav-link" href="#">
        <i class="fab fa-twitter"></i>
      </a>
    </li>

    <li class="nav-item social-youtube mr-1">
      <a class="nav-link" href="#">
        <i class="fab fa-youtube"></i>
      </a>
    </li>

    <li class="nav-item social-facebook">
      <a class="nav-link" href="#">
        <i class="fab fa-facebook-square"></i>
      </a>
    </li>
  </ul>
</div>

2 respuestas 2

1

El problema proviene de la clase .nav-link, añade un padding al elemento por lo que no cabe el icono.

Prueba a cambiar el estilo del enlace a esto y me dices si te funciona!!

.social-twitter a {
  color: #fff;
  font-size: 20px;
  height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
1
  • gracias me ha funcionado :)
    – crt
    Commented el 14 abr. 2019 a las 22:34
0

Añadiendo únicamente margin: 0 auto a .social-twitter funciona.

El estilo quedaría así:

.social-twitter{background-color: #0084ff; height: 45px; width: 45px; border-radius: 50%; margin: 0 auto;} 
.social-twitter a{color:#fff; font-size:20px;}
1
  • no funciona, empuja todo el contenido a la derecha
    – crt
    Commented el 14 abr. 2019 a las 5:14

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.