css - Tamaño de letra responsiva Iconos impresionantes

twitter-bootstrap icons

Question

Estoy usando íconos de FontAwesome en mi sitio web de Bootstrap y quiero mostrar íconos en diferentes tamaños dependiendo de la resolución de la pantalla.

Idealmente, me gustaría mostrar los iconos impresionantes de la fuente utilizando un porcentaje del ancho de los contenedores, es decir, el 50% del ancho, para que se amplíen y disminuyan. Sé que probablemente podría hacer esto simplemente usando iconos svg, pero quería usar FontAwesome , ya que lo estoy usando en otro lugar de mi sitio.

Entiendo que puede especificar el tamaño usando clases, es decir, fa-lg o fa-2x. ¿Sería la mejor solución usar clases de Bootstrap para ocultar y mostrar los distintos tamaños según la resolución de la pantalla, o puede hacer que los íconos se amplíen automáticamente usando el porcentaje?

Answer 1

Sí, la mejor manera de hacerlo es definir CSS para que el glifón tenga el tamaño de una fuente a tu gusto:

.glyphicon-small {
    font-size: 1.2em;
}

.glyphicon-medium {
    font-size: 2em;
}

.glyphicon-big {
    font-size: 4em;
}

Pero, si desea adaptarlo al tamaño de la pantalla, puede tener solo una clase CSS y modificarla durante la ejecución con la regla CSS @media para obtener los resultados deseados:

@media screen and (max-width: 299px) {
    .glyphicon {
        font-size: 1.2em;
    }
}

@media screen and (min-width: 300px) and (max-width: 799px) {
    .glyphicon {
        font-size: 2em;
    }
}

@media screen and (min-width: 800px) {
    .glyphicon {
        font-size: 4em;
    }
}

Esto limpiará tu código y obtendrás resultados realmente buenos con un esfuerzo de codificación mínimo;)

Answer 2

Tienes que ver esta respuesta:

Escalado de fuente basado en el ancho del contenedor

Utilice unidades "vw" en tamaño de fuente. También puedes ver la tabla de soporte del navegador que se menciona allí, es bastante buena

¡Aclamaciones!

Answer 3

/* Font ico (Font-Awesome) */
.elastic-fai-xl{
    font-size:80px;
}
.elastic-fai-lg{
    font-size:50px;
}
.elastic-fai-md{
    font-size:40px;
}
.elastic-fai-sm{
    font-size:30px;
}
.elastic-fai-xs{
    font-size:20px;
}
/* Extra small devices */
@media(max-width:544px){
    .elastic-fai-group > .elastic-fai, .elastic-fai-xs{
        font-size:20px;
    }
}
/* Small devices */
@media(min-width:544px){
    .elastic-fai-group > .elastic-fai, .elastic-fai-sm{
        font-size:30px;
    }
}
/* Medium devices */
@media(min-width:768px){
    .elastic-fai-group > .elastic-fai, .elastic-fai-md{
        font-size:40px;
    }
}
/* Large devices */
@media(min-width:992px){
    .elastic-fai-group > .elastic-fai, .elastic-fai-lg{
        font-size:50px;
    }
}
/* Exrta Large devices */
@media(min-width:1200px){
    .elastic-fai-group > .elastic-fai, .elastic-fai-xl{
        font-size:80px;
    }
}