josei josei - 1 month ago 6
CSS Question

How to increase the size of an unicode icon awesome fonts relative to its container with CSS

How to increase the size of an unicode icon awesome fonts relative to its container with CSS?

.iconTimes:before {
display: block;
font-family: FontAwesome;
content: "\f00d";
}

Answer

You can make use of em units for the same. Say your HTML is

<div class="container">
  <i class="iconTimes"></i>
</div>

Your CSS could be

.container { 
   font-size: 14px; //if this was not declared `.iconTimes` would have 2 x 16px = 32px
}

.iconTimes {
    font-size: 2em; //this will be 2 x 14px = 28px
}

.iconTimes:before {
    display: block;
    font-family: FontAwesome;
    content: "\f00d";
 }

Codepen here

If the font-size is not mentioned for any element it will be by default '16px', which means if you use '2em' and its parent's font-size is NOT declared then it will be 2x16px = 32px.