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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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