字体很棒 <svg> 大小

Question

所以我想用图标制作这个圆圈，对于图标，我想使用很棒的字体。对于圆圈，我使用填充技巧，因此圆圈始终是圆圈而不是椭圆。

图标变得太大，移除时图标box-sizing: border-box太小。

我认为这padding-top: 20%;是问题的原因，但我不知道如何解决这个问题。

svg{
    width: 20% !important;
    padding-top: 20%;
    margin-right: 20%;
    border-radius: 100%;
    background-color: #ec567c;
    float: left;
    box-sizing: border-box;
}

svg:last-of-type{
  margin-right: 0;
}

<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

<i class="fas fa-female"></i>
<i class="fas fa-music"></i>
<i class="fas fa-camera"></i>

如果你拿走box-sizing: border-box;图标会在圆圈中，但它们会变小。

Answer 1

Font Awesome 是 - 顾名思义 - 一种字体。这意味着您可以使用 更改大小font-size。

如果您认为图标太大：减小字体大小。

如果您认为图标太小：将字体调大。

Answer 2

您可以向图标添加一个属性，使其比默认图标更大更小。在撰写本文时，Fontawesome 文档已关闭，所以我现在无法获取它......我认为这是最好的方法。

编辑：

好的，所以它是 data-fa-transform="shrink-6" 来缩小。我相信你可以使用 data-fa-transform="shrink--6" 来增加大小

Hello
<span class="fa-layers fa-fw">
    <i class="fas fa-circle" data-fa-transform="shrink--6"></i>
    <i class="far fa-calendar-alt fa-inverse" data-fa-transform="shrink-6"></i>
</span>
World

https://jsfiddle.net/vk3qw09f/395/

在加载 Fontawesome JS 之前添加以下 JS 会将 svg 包装在标签中。我建议你这样做并设置 i 标签而不是 svg 的样式。

FontAwesomeConfig = {
    autoReplaceSvg: 'nest'
};