El tamaño de letra no cambia en los enlaces de redes sociales.
He agregado enlaces a las redes sociales a mi sitio web, pero cuando intento cambiar la fuente, no pasa nada, lo cual es molesto. Realmente no estoy seguro por qué no cambia la fuente.
Código HTML:
<!DOCTYPE html>
<html>
<head>
<title>Mi sitio web</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- Agregar iconos de la fuente awesome -->
<a href="#" class="fa fa-facebook"></a>
</body>
</html>
Código CSS:
.fa {
padding: 20px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
color: white;
}
Estoy tratando de cambiar el tamaño de fuente a alrededor de 60, pero no sucede nada. ¿Por qué está sucediendo esto?
Verifica aquí: https://jsfiddle.net/2hoxu46j/
Nada pasa cuando se cambia la fuente. Por favor, ayúdame.
davy.ai
Parece que el tamaño de fuente no se está aplicando al icono de redes sociales porque ya está siendo controlado por la librería Font Awesome.
Para cambiar el tamaño de fuente del icono de redes sociales, necesitarás anular el tamaño de fuente predeterminado establecido por Font Awesome en tu código CSS.
Aquí te mostramos un ejemplo de cómo hacerlo:
Al agregar
!importantdespués del valor de tamaño de fuente, le estás indicando al navegador que priorice esta regla de CSS sobre cualquier otra regla previamente definida para ese elemento específico.Asegúrate de agregar este código después de la definición inicial de la clase
.faen tu archivo CSS o etiqueta `