cambiar el tamaño de fuente en iconos impresionantes de fuente

5 minutos de lectura

avatar de usuario
Jeffrey Cunningham

Estoy usando el tema secundario de parallax pro genesis, por lo que estoy trabajando dentro de un área de widgets.

No estoy seguro de si estoy haciendo esto de la manera correcta, pero traté de escribir debajo de un ícono de fuente increíble al hacer esto en el área de widgets:

<i class="fa fa-code fa-4x">Fully mobile responsive designs 
that adjust to fit all platforms</i>

Funciona pero el texto es enorme. ¿Cómo puedo cambiar el tamaño del texto? He intentado cambiar el tamaño de la fuente en la sección .fa-code en la carpeta Font Awesome CSS pero no funciona. ¿Hay una mejor manera de escribir debajo de mi icono o es así como debería hacerse?

¡Gracias!

  • Ok, he llegado a una conclusión sobre la mejor manera de lograr la edición de texto para íconos impresionantes de fuentes dentro de un área de widget de texto del tema parallax pro. Si coloca el texto dentro de las etiquetas como se muestra arriba e intenta apuntar al texto en css usando .fa o .fa-code, estará apuntando no solo al texto sino a todo el icono. Por lo tanto, debe crear un elemento separado dentro del ícono de fuente impresionante envolviendo su texto en etiquetas

    . Luego puede usar .fa p {text-size 20px;} o para ser más específico .fa-(cualquier icono que esté usando) p {text-size 20px;}

    –Jeffrey Cunningham

    10 de junio de 2015 a las 4:12


avatar de usuario
Yeldar Kurmangaliyev

En realidad, los íconos de fuentes increíbles son símbolos de texto. Significa que su tamaño se ve afectado por font-size propiedad.

fa La clase CSS significa fuente impresionante y estilos generales.
fa-code La clase CSS representa un icono específico.
fa-4x La clase CSS significa “tamaño de fuente: 4em;”

Significa que cuando incluye su texto en FA span, el texto completo se incrementará 4 veces. NO debe haber texto dentro <i> etiqueta en tu ejemplo.

<i class="fa fa-code fa-4x"></i> 
Fully mobile responsive designs that adjust to fit all platforms

Ahora, puede manipular con el texto fuera de su i etiqueta como de costumbre.

Vea el siguiente ejemplo de trabajo:

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="row text-center">
  <i class="fa fa-code fa-4x"></i>
</div>
<div class="row text-center">    
  <span class="red-text-for-example">Fully mobile responsive designs that adjust to fit all platforms</span>
 </div>

Mira aquí: http://jsfiddle.net/c3Lbcmjb/

Además, no debes cambiar font-awesome.css expediente.
Le proporciona muchas formas convenientes de controlar tamaños, fuentes, colores, etc.

Si desea manipular con el tamaño de un icono FA, cambie fa-4x clase a fa-3x, fa-2x etc. (o elimínelo si necesita que el ícono FA tenga el mismo tamaño que su texto).

  • ¡Muchas gracias! Esta es probablemente la mejor manera de hacerlo para que el texto no quede atado en el estilo impresionante de la fuente.

    –Jeffrey Cunningham

    9 de junio de 2015 a las 1:24


  • @JeffreyCunningham Podría considerar marcar esta respuesta como correcta, para que ya no aparezca en la lista de preguntas sin respuesta. Eso evitará que se agreguen aleatoriamente nuevas respuestas (como la más reciente).

    – Señor Lister

    10 de noviembre de 2016 a las 19:32


en el selector css:

font-size: 4em;

  • Si va a responder una pregunta, agregue información más detallada: stackoverflow.com/help/how-to-answer

    – Jordania

    8 de junio de 2015 a las 10:28

  • Gracias por su ayuda, pero esto no funciona. Coloqué para seguir en mi archivo css principal: .fa-code { margin-left: 75px; margen derecho: 75px; tamaño de fuente: 100px; el código de margen hace exactamente lo que quiero, pero el tamaño del texto no cambia. ¿Alguna idea de por qué?

    –Jeffrey Cunningham

    9 de junio de 2015 a las 2:11


avatar de usuario
Jordán

Solución:

Usando su hoja de estilo principal, simplemente agregue:

.fa-code {
    font-size: 20px;
}

Lo anterior apuntará solo al ícono de código impresionante de fuente. Si desea apuntar a todos los íconos, simplemente use:

.fa {
    font-size: 20px;
}

Alternativamente, puede agregar un estilo en línea, esto no se considera una buena práctica, pero pensé que lo explicaría en ambos sentidos.

<i class="fa fa-code" style="font-size: 20px;">Fully mobile responsive designs that adjust to fit all platforms</i>

solía 20px como ejemplo, pero simplemente cambie el valor a sus necesidades. ¡Espero que esto ayude!

  • No estoy seguro de que sea lo que la gente llama “no se considera una buena práctica”. Describes un i etiqueta con clase fa-4x que significa “tamaño de fuente: 4em;”. Luego, describe el estilo en línea “tamaño de fuente: 20px;” que anula la clase FA CSS.

    –Yeldar Kurmangaliyev

    8 de junio de 2015 a las 4:31

  • El uso de estilos en línea se considera una mala práctica, no estoy seguro de lo que está tratando de decir …

    – Jordania

    8 de junio de 2015 a las 4:33

  • Estaba tratando de decir que tenías la clase ‘fa-4x’ descrita para un i. Lo has editado. Ahora, se ve mejor.

    –Yeldar Kurmangaliyev

    8 de junio de 2015 a las 4:38

  • Sí, estaba en medio de la edición cuando comentaste.

    – Jordania

    8 de junio de 2015 a las 4:40

  • En realidad esto no funciona. Coloqué el texto dentro de las etiquetas y creé el siguiente código en mi archivo css principal: .fa-code { margin-left: 75px; margen derecho: 75px; tamaño de fuente: 100px; El código de margen funciona pero el texto no cambia de tamaño.

    –Jeffrey Cunningham

    9 de junio de 2015 a las 2:06


avatar de usuario
Kris1

Puede usar CSS en línea o externo

<i class="fa fa-code fa-6" style="font-size: 7em;"></i>

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad