设置图标尺寸

#相对尺寸

图标继承其父容器的字体大小,这允许它们匹配您可能使用的任何文本。 使用以下类,我们可以相对于继承的字体大小增加或减少图标的大小。

<i  class="fas fa-camera fa-xs"></i><i  class="fas fa-camera fa-sm"></i><i  class="fas fa-camera fa-lg"></i><i  class="fas fa-camera fa-2x"></i><i  class="fas fa-camera fa-3x"></i><i  class="fas fa-camera fa-5x"></i><i  class="fas fa-camera fa-7x"></i><i  class="fas fa-camera fa-10x"></i>

这里有几个例子,您可以在其中看到相对比例。下面的都相对于这个0.5rem之后的大小。

<div style="font-size: 0.5rem" >  <i class="fas fa-camera fa-xs"></i>  <i class="fas fa-camera fa-sm"></i>  <i class="fas fa-camera fa-lg"></i>  <i class="fas fa-camera fa-2x"></i>  <i class="fas fa-camera fa-3x"></i>  <i class="fas fa-camera fa-5x"></i>  <i class="fas fa-camera fa-7x"></i>  <i class="fas fa-camera fa-10x"></i></div>

下面这个相对于font-size:24px之后的大小

<div style="font-size: 24px;">  <i class="fas fa-camera fa-xs"></i>  <i class="fas fa-camera fa-sm"></i>  <i class="fas fa-camera fa-lg"></i>  <i class="fas fa-camera fa-2x"></i>  <i class="fas fa-camera fa-3x"></i>  <i class="fas fa-camera fa-5x"></i>  <i class="fas fa-camera fa-7x"></i>  <i class="fas fa-camera fa-10x"></i></div>

您还可以通过在项目的以图标为目标的 CSS 中设置字体大小或直接在引用图标的 HTML 元素的样式属性中设置字体大小来直接设置图标大小的样式。