1

Soy nuevo en este rubro y bajé un template de internet y quiero cambiar el tamaño de este icono(instagram nav bar, abajo adjunto imagen)... busqué la clase en todos los archivos y no encontré nada... en el html está como

<a href="https://www.instagram.com/">
                        <span class="fab fa-instagram"></span>
                    </a>

Lo único que encontré fue en el archivo fontawesome css que dice:

.fa-instagram:before {
  content: "\f16d"; }

Pero no está en ningún lado más esa class por lo menos.. y no se como agrandar el icono... Lo que creo en base a mi inexperiencia es que el icono proviene definido del sistema este fontawesome.

Adjunto imagen examinando el icono en la herramienta de desarrollador de chrome. Herramienta Desarrollador Chrome

Y el icono no está en la carpeta imagenes del template, osea que obviamente lo saca de internet o lo genera de manera css pero no sé...

2
  • Buenas, te recomiendo que descargues el svg para que puedas tener más control sobre tu iconos, hay bastantes páginas que puedes descargar gratis así que no será un problema. el 3 nov. 2021 a las 21:26
  • Hola, si lo pensé. Pero también me daba intriga de saber como funcionaba, porque la verdad me llama mucho la atención que haya un icono que no puedo editar.. por eso..
    – Tefa
    el 3 nov. 2021 a las 21:31

2 respuestas 2

2

Es super sencillo, FontAwesome es una fuente, por ende puedes cambiar el tamaño solo con la propiedad CSS Font-Size

<i class="fa-brands fa-amazon" style="font-size:100px;"></i>

Te dejo un Ejemplo:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"/>

<i class="fa-brands fa-amazon" style="font-size:100px;"></i>

4
  • Si entendí bien me estás diciendo que con solo agregarle style="font-size:100px; le puedo modificar el tamaño ? Edit: que grande, hice eso y me anduvo. Gracias
    – Tefa
    el 3 nov. 2021 a las 21:48
  • Si, justo te deje un ejemplo, ejecutalo y ve el 3 nov. 2021 a las 21:49
  • 1
    Además, dado que estás usando font-awesome... puedes usar sus propias clases para modificar los tamaños sin necesidad de tocar tu css, añadiendo por ejemplo fa-lg a las clases del icono se hará más grande, hasta 10 veces su tamaño con fa-10x. Aquí tienes la referencia. Me canso de decir esto pero es muy cierto.... aprender a buscar en la documentación de las librerías que usas es lo más importante en programación!
    – Benito-B
    el 3 nov. 2021 a las 22:27
  • Sabés que lo había encontrado ya... pero tengo 38mil pestañas y me había olvidado cuando hice la pregunta... iba a probarlo y no llegué a eso, me respondieron antes.. por lo cual quedo agradecido
    – Tefa
    el 3 nov. 2021 a las 23:58
1

Siempre puedes hacer algo como esto

span {
  font-size: 30px;
}

En tu template (simplemente agregando una clase y luego cambiarle el tamaño en el css)

<a class="icon" href="https://www.instagram.com/">
  <span class="fab fa-instagram"></span>
</a>

De igual forma lo recomendable es utilizar el svg en tu app (no un enlace) ya que si por algún motivo deja de funcionar tu icono no se va a mostrar.

1
  • Gracias por tu comentario
    – Tefa
    el 3 nov. 2021 a las 22:26

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.