Saltar al contenido

¿Es posible hacer que los íconos de Font Awesome sean más grandes que ‘fa-5x’?

Deseamos compartir contigo la mejor respuesta que hemos encontrado en todo internet. Nosotros deseamos que te resulte de ayuda y si deseas compartir alguna mejora siente la libertad de hacerlo..

Solución:

Font Awesome es solo una fuente, por lo que puede usar el tamaño de fuente attribute en su CSS para cambiar el tamaño del icono.

Así que puedes simplemente agregar una clase al ícono como este:

.big-icon 
    font-size: 32px;

Alternativamente, puede editar la fuente y crear sus propios incrementos.

Fuente Impresionante 5

https://github.com/FortAwesome/Font-Awesome/blob/master/web-fonts-with-css/less/_larger.less

// Icon Sizes
// -------------------------

.larger(@factor) when (@factor > 0) 
  .larger((@factor - 1));

  [email protected]fa-css-prefix[email protected]factorx 
    font-size: (@factor * 1em);
  


/* makes the font 33% larger relative to the icon container */
[email protected]fa-css-prefix-lg 
  font-size: (4em / 3);
  line-height: (3em / 4);
  vertical-align: -.0667em;


[email protected]fa-css-prefix-xs 
  font-size: .75em;


[email protected]fa-css-prefix-sm 
  font-size: .875em;


// Change the number below to create your own incrementations
// This currently creates classes .fa-1x - .fa-10x
.larger(10);

Fuente Impresionante 4

https://github.com/FortAwesome/Font-Awesome/blob/v4.7.0/less/larger.less

// Icon Sizes
// -------------------------

/* makes the font 33% larger relative to the icon container */
[email protected]fa-css-prefix-lg 
    font-size: (4em / 3);
    line-height: (3em / 4);
    vertical-align: -15%;


[email protected]fa-css-prefix-2x  font-size: 2em; 
[email protected]fa-css-prefix-3x  font-size: 3em; 
[email protected]fa-css-prefix-4x  font-size: 4em; 
[email protected]fa-css-prefix-5x  font-size: 5em; 

// Your custom sizes
[email protected]fa-css-prefix-6x  font-size: 6em; 
[email protected]fa-css-prefix-7x  font-size: 7em; 
[email protected]fa-css-prefix-8x  font-size: 8em; 

Puede redefinir/sobrescribir el valor predeterminado fuente impresionante tamaños y también agregue sus propios tamaños

.fa-1x
    font-size:0.8em;

.fa-2x
    font-size:1em;

.fa-3x
    font-size:1.2em;

.fa-4x
    font-size:1.4em;

.fa-5x
    font-size:1.6em;

.fa-mycustomx
    font-size:3.2em;

Comentarios y valoraciones del post

Finalizando este artículo puedes encontrar las observaciones de otros programadores, tú también tienes la opción de insertar el tuyo si te gusta.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *