设置图标尺寸
#相对尺寸
图标继承其父容器的字体大小,这允许它们匹配您可能使用的任何文本。 使用以下类,我们可以相对于继承的字体大小增加或减少图标的大小。
<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 元素的样式属性中设置字体大小来直接设置图标大小的样式。