html - 如何使用 CSS 增加 unicode 图标相对于其容器的 Font Awesome 的大小

Question

如何使用 CSS 增加 unicode 图标 awesome 字体相对于其容器的大小？

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

Answer 1

您可以使用 em 单位。假设您的 HTML 是

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

你的 CSS 可能是

.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.