Responsive Size Font Awesome Icons

Question

I'm using FontAwesome icons in my responsive Bootstrap website and want to display icons at different sizes depending on the screen resolution.

Ideally I'd like to display the font awesome icons using a percentage of the containers width, i.e. 50% of the width, so they scale up and down. I know that I could probably do this just using svg icons, but I wanted to use FontAwesome, as I'm using it elsewhere in my site.

I understand you can specify the size using classes, i.e. fa-lg or fa-2x. Would the best solution be to use Bootstrap classes to hide and display the various sizes depending on screen resolution, or can you get the icons to scale automatically using percentage?

Answer 1

You HAVE TO see this answer:

Font scaling based on width of container

Use "vw" units on font-size. Also check browser support table which is mentioned there - its pretty good.

Cheers!

Answer 2

Yes, the best way is define CSS giving the glyphicon a font-size to your liking:

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

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

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

But, if you want to adapt it by screen size, you can have just one CSS class and modify it during execution with CSS @media rule to get desired results:

@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;
    }
}

This will clean your code and you will have really nice results with minimum coding effort ;)

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;
    }
}